왼쪽 여백이 있는 블록 요소 정렬 in CSS
margin의 값 auto는
실제로 가운데 정렬만 하는 것이 아닙니다.
사실 이 값은 여백을 자동으로 계산하여
가능한 최대로 만들 수 있습니다.
왼쪽과 오른쪽 여백에 auto를
설정하면 요소가 가운데 정렬됩니다.
그러나 왼쪽 여백에만 설정할 수도 있습니다. 이 경우 요소는 왼쪽에 가능한 최대 여백을 얻고 가장 오른쪽 위치를 차지하게 됩니다:
<div class="parent">
<div class="child"></div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
margin-left: auto; /* 자동 왼쪽 여백 설정 */
height: 100px;
width: 200px;
border: 1px solid green;
}
:
