Hướng dẫn what are auto margins in css? - lề tự động trong css là gì?

Thử nó

Thuộc tính cấu thành

Thuộc tính này là tốc ký cho các thuộc tính CSS sau:

• margin-top
• margin-right
• margin-bottom
• margin-left

Cú pháp

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

Thuộc tính margin có thể được chỉ định bằng cách sử dụng một, hai, ba hoặc bốn giá trị. Mỗi giá trị là

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

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

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

• Khi một giá trị được chỉ định, nó áp dụng cùng một biên cho cả bốn bên.one value is specified, it applies the same margin to all four sides.
• Khi hai giá trị được chỉ định, lề đầu tiên áp dụng cho trên cùng và dưới cùng, thứ hai sang trái và phải.two values are specified, the first margin applies to the top and bottom, the second to the left and right.
• Khi ba giá trị được chỉ định, lề đầu tiên áp dụng cho đỉnh, thứ hai bên phải và bên trái, thứ ba xuống phía dưới.three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom.
• Khi bốn giá trị được chỉ định, các lề áp dụng cho đỉnh, phải, dưới và bên trái theo thứ tự đó (theo chiều kim đồng hồ).four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Giá trị

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

Kích thước của lề như một giá trị cố định.

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

Kích thước của biên độ theo tỷ lệ phần trăm, so 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

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

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

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

Sự mô tả

Thuộc tính này có thể được sử dụng để đặt biên độ ở cả bốn mặt của một phần tử. Biên độ tạo thêm không gian xung quanh một phần tử, không giống như

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

Các lề trên và dưới không có tác dụng đối với các yếu tố nội tuyến không được sao chép, chẳng hạn như

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

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

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

Định tâm ngang

Để tập trung một cái gì đó theo chiều ngang trong các trình duyệt hiện đại, bạn có thể sử dụng

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

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

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

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

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

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

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

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

Tuy nhiên, trong các trình duyệt cũ như IE8-9 không hỗ trợ bố cục hộp linh hoạt, chúng không có sẵn. Để tập trung một phần tử bên trong cha mẹ của nó, hãy sử dụng

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

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

Thu gọn lề

Các lề trên và dưới của các yếu tố đôi khi được sụp đổ thành một lề duy nhất bằng với hai lề lớn hơn. Xem làm chủ việc sụp đổ lề để biết thêm thông tin.

Định nghĩa chính thức

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cú pháp chính thức

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

Ví dụ

Ví dụ đơn giản

HTML

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

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

CSS

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

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

Nhiều ví dụ hơn

margin: 5%;                 /* All sides: 5% margin */

margin: 10px;               /* All sides: 10px margin */

margin: 1.6em 20px;         /* top and bottom: 1.6em margin */
                            /* left and right: 20px margin */

margin: 10px 3% -1em;       /* top:            10px margin */
                            /* left and right: 3% margin   */
                            /* bottom:         -1em margin */

margin: 10px 3px 30px 5px;  /* top:    10px margin */
                            /* right:  3px margin  */
                            /* bottom: 30px margin */
                            /* left:   5px margin  */

margin: 2em auto;           /* top and bottom: 2em margin   */
                            /* Box is horizontally centered */

margin: auto;               /* top and bottom: 0 margin     */
                            /* Box is horizontally centered */

Xem thêm