Căn chỉnh phần tử khối với khoảng trống bên trái trong CSS
Giá trị auto cho margin
thực ra không chỉ có thể căn giữa.
Về bản chất, giá trị này cho phép tính toán
khoảng trống tự động và làm cho nó trở nên tối đa
có thể. Khi chúng ta đặt auto cho
khoảng trống bên trái và bên phải - phần tử
sẽ được căn giữa.
Tuy nhiên, có thể chỉ đặt khoảng trống bên trái. Trong trường hợp này, phần tử sẽ nhận được khoảng trống bên trái tối đa có thể và chiếm vị trí cực bên phải:
<div class="parent">
<div class="child"></div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
margin-left: auto; /* đặt khoảng trống bên trái tự động */
height: 100px;
width: 200px;
border: 1px solid green;
}
: