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:

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

css.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;
}

Результат: