왼쪽 여백이 있는 블록 요소 정렬 in CSS

margin의 값 auto는 실제로 가운데 정렬만 하는 것이 아닙니다. 사실 이 값은 여백을 자동으로 계산하여 가능한 최대로 만들 수 있습니다. 왼쪽과 오른쪽 여백에 auto를 설정하면 요소가 가운데 정렬됩니다.

그러나 왼쪽 여백에만 설정할 수도 있습니다. 이 경우 요소는 왼쪽에 가능한 최대 여백을 얻고 가장 오른쪽 위치를 차지하게 됩니다:

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

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* 자동 왼쪽 여백 설정 */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: