margin-left

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính margin-left CSS đặt vùng lề ở phía bên trái của phần tử. Giá trị dương đặt phần tử xa hơn so với các phần tử lân cận, trong khi giá trị âm đặt nó gần hơn.

Try it

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section id="default-example">
  <div id="container">
    <div class="col"></div>
    <div class="col transition-all" id="example-element"></div>
    <div class="col"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #5b6dcd 10px;
  background-color: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

Lề dọc của hai hộp liền kề có thể hợp nhất lại. Hiện tượng này được gọi là thu gọn lề.

Trong các trường hợp hiếm khi chiều rộng bị ràng buộc quá mức (tức là khi tất cả các giá trị width, margin-left, border, padding, vùng nội dung và margin-right đều được xác định), margin-left bị bỏ qua và sẽ có cùng giá trị tính toán như khi giá trị auto được chỉ định.

Cú pháp

css

/* Giá trị <length> */
margin-left: 10px; /* Độ dài tuyệt đối */
margin-left: 1em; /* Tương đối với kích thước văn bản */
margin-left: 5%; /* Tương đối với chiều rộng của khối chứa gần nhất */
margin-left: anchor-size(self-inline);
margin-left: calc(anchor-size(--my-anchor width, 20px) / 4);

/* Giá trị từ khóa */
margin-left: auto;

/* Giá trị toàn cục */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

Thuộc tính margin-left được chỉ định là từ khóa auto, hoặc một <length>, hoặc một <percentage>. Giá trị của nó có thể là dương, không hoặc âm.

Giá trị

<length>

Kích thước của lề dưới dạng giá trị cố định.

Đối với các phần tử được định vị bằng neo, hàm anchor-size() phân giải thành giá trị <length> tương đối với chiều rộng hoặc chiều cao của phần tử neo liên kết (xem Đặt lề phần tử dựa trên kích thước neo).

<percentage>

Kích thước của lề dưới dạng phần trăm, tương đối với kích thước nội tuyến (chiều rộng trong ngôn ngữ ngang, được xác định bởi writing-mode) của khối chứa.

auto

Lề trái nhận một phần không gian ngang chưa sử dụng, được xác định chủ yếu bởi chế độ bố cục được dùng. Nếu cả giá trị của margin-left và margin-right đều là auto, không gian tính toán được phân bổ đều nhau. Bảng dưới đây tóm tắt các trường hợp khác nhau:

Giá trị của `display`	Giá trị của `float`	Giá trị của `position`	Giá trị tính toán của `auto`	Ghi chú
`inline`, `inline-block`, `inline-table`	bất kỳ	`static` hoặc `relative`	`0`	Chế độ bố cục nội tuyến
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	bất kỳ	`static` hoặc `relative`	`0`, ngoại trừ khi cả `margin-left` và `margin-right` được đặt thành `auto`. Trong trường hợp đó, nó được đặt thành giá trị căn giữa phần tử bên trong phần tử cha.	Chế độ bố cục khối
`block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption`	`left` hoặc `right`	`static` hoặc `relative`	`0`	Chế độ bố cục khối (phần tử nổi)
bất kỳ `table-`, ngoại trừ* `table-caption`	bất kỳ	bất kỳ	`0`	Các phần tử `table-*` nội bộ không có lề, hãy sử dụng `border-spacing` thay thế
bất kỳ, ngoại trừ `flex`, `inline-flex`, hoặc `table-*`	bất kỳ	`fixed` hoặc `absolute`	`0`, ngoại trừ khi cả `margin-left` và `margin-right` được đặt thành `auto`. Trong trường hợp đó, nó được đặt thành giá trị căn giữa vùng viền bên trong `width` có sẵn, nếu cố định.	Chế độ bố cục định vị tuyệt đối
`flex`, `inline-flex`	bất kỳ	bất kỳ	`0`, ngoại trừ khi có không gian ngang tự do dương. Trong trường hợp đó, nó được phân bổ đều cho tất cả các lề `auto` theo chiều ngang.	Chế độ bố cục Flexbox

Định nghĩa hình thức

Initial value	`0`
Applies to	all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length
Animation type	a length

Cú pháp hình thức

margin-left = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Ví dụ

Đặt margin-left theo phần trăm

Các giá trị phần trăm cho margin-left tương đối với kích thước nội tuyến của vùng chứa.

HTML

html

<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>