CSS에서 인라인 블록 요소 오른쪽 정렬하기

html<div class="parent">
  <span class="child">text</span>
</div>

css.parent {
  text-align: right;
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid green;
}

Задание 1

부모 요소 안에 div가 있습니다:

html<div class="parent">
  <div class="child">text</div>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  padding: 10px;
  border: 1px solid green;
}

자식 div 요소를 인라인 블록 요소로 변환한 후, 부모 요소의 오른쪽에 정렬하세요.

Задание 2

이전 과제를 수정하여 div가 오른쪽 가장자리에 바짝 붙지 않도록 하세요. 이를 위해 부모 요소에 오른쪽 padding을 추가하세요.

Задание 3

이전 과제를 수정하여 div가 오른쪽 가장자리에 바짝 붙지 않도록 하세요. 이를 위해 자식 요소에 오른쪽 margin을 설정하세요.

Задание 4

부모 요소 안에 링크가 있습니다:

html<div class="parent">
  <a href="" class="child">text</a>
</div>

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  width: 100px;
  padding: 10px;
  border: 1px solid green;
}

링크를 인라인 블록 요소로 변환한 후, 부모 요소의 오른쪽에 정렬하세요.

Задание 5

이전 과제를 수정하여 링크 내부의 텍스트가 링크의 가운데에 정렬되도록 하세요.