margin

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 CSS rút gọn margin đặt vùng lề cho cả bốn phía của một phần tử.

Try it

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

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

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

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

Các thuộc tính thành phần

Thuộc tính này là dạng rút gọn cho các thuộc tính CSS sau:

Cú pháp

css

/* áp dụng cho cả bốn phía */
margin: 1em;
margin: -3px;

/* trên và dưới | trái và phải */
margin: 5% auto;

/* trên | trái và phải | dưới */
margin: 1em auto 2em;

/* trên | phải | dưới | trái */
margin: 2px 1em 0 auto;

/* Giá trị anchor-size() */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
  anchor-size(--my-anchor self-inline, 50px);

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

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

Thuộc tính margin có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị. Mỗi giá trị là <length>, <percentage>, hoặc từ khóa auto. Giá trị âm kéo phần tử lại gần các phần tử lân cận hơn so với mặc định.

Khi chỉ định một giá trị, nó áp dụng cùng lề cho cả bốn phía.
Khi chỉ định hai giá trị, lề đầu tiên áp dụng cho trên và dưới, lề thứ hai cho trái và phải.
Khi chỉ định ba giá trị, lề đầu tiên áp dụng cho trên, lề thứ hai cho phải và trái, lề thứ ba cho dưới.
Khi chỉ định bốn giá trị, các lề áp dụng cho trên, phải, dưới và trái theo thứ tự đó (theo chiều kim đồng hồ).

Giá trị

<length>

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

Đối với các phần tử định vị theo 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 lề dưới dạng phần trăm, tương đối với kích thước inline (chiều rộng trong ngôn ngữ ngang, được xác định bởi writing-mode) của khối chứa.

auto

Trình duyệt chọn một lề phù hợp để sử dụng. Ví dụ, trong một số trường hợp giá trị này có thể được dùng để căn giữa một phần tử.

Initial value	as each of the properties of the shorthand: `margin-bottom`: `0` `margin-left`: `0` `margin-right`: `0` `margin-top`: `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	as each of the properties of the shorthand: `margin-bottom`: the percentage as specified or the absolute length `margin-left`: the percentage as specified or the absolute length `margin-right`: the percentage as specified or the absolute length `margin-top`: the percentage as specified or the absolute length
Animation type	a length

Cú pháp chính thức

margin = 
  <'margin-top'>{1,4}  

<margin-top> = 
  <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ụ

Ví dụ cơ bản

HTML

html

<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

css

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Các ví dụ khác

css

margin: 5%; /* Tất cả các phía: lề 5% */

margin: 10px; /* Tất cả các phía: lề 10px */

margin: 1.6em 20px; /* trên và dưới: lề 1.6em */
/* trái và phải: lề 20px */

margin: 10px 3% -1em; /* trên:            lề 10px */
/* trái và phải: lề 3%   */
/* dưới:         lề -1em */

margin: 10px 3px 30px 5px; /* trên:    lề 10px */
/* phải:  lề 3px  */
/* dưới:  lề 30px */
/* trái:  lề 5px  */

margin: 2em auto; /* trên và dưới: lề 2em     */
/* Hộp được căn giữa theo chiều ngang */

margin: auto; /* trên và dưới: lề 0       */
/* Hộp được căn giữa theo chiều ngang */