Các marginbất động sản xác định phần ngoài cùng của mô hình hộp, tạo ra không gian xung quanh một phần tử, bên ngoài của bất kỳ biên giới xác định.
Lề được đặt bằng cách sử dụng độ dài, tỷ lệ phần trăm hoặc từ khóa autovà có thể có giá trị âm. Đây là một ví dụ:
.box ( margin: 0 3em 0 3em; )margin là một thuộc tính viết tắt và chấp nhận tối đa bốn giá trị, được hiển thị ở đây:
.box ( margin: || || || )Nếu ít hơn bốn giá trị được đặt, các giá trị bị thiếu được giả định dựa trên những giá trị được xác định. Ví dụ: hai bộ quy tắc sau sẽ nhận được kết quả giống hệt nhau:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Do đó, nếu chỉ có một giá trị được xác định, điều này sẽ đặt tất cả bốn biên thành cùng một giá trị. Nếu ba giá trị được khai báo, nó là margin: (top) (left-and-right) (bottom);.
Bất kỳ lợi nhuận riêng lẻ nào cũng có thể được khai báo bằng cách sử dụng thủ công, trong trường hợp đó, bạn sẽ chỉ xác định một giá trị cho mỗi thuộc tính:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto và căn giữa
Mỗi thuộc tính ký quỹ cũng có thể chấp nhận một giá trị auto. Một giá trị về autocơ bản cho trình duyệt xác định lợi nhuận cho bạn. Trong hầu hết các trường hợp, giá trị của autosẽ tương đương với giá trị của 0(là giá trị ban đầu cho mỗi thuộc tính ký quỹ) hoặc bất kỳ khoảng trống nào có sẵn ở phía đó của phần tử. Tuy nhiên, autorất tiện cho việc căn giữa theo chiều ngang:
.container ( width: 980px; margin: 0 auto; )Trong ví dụ này, hai điều được thực hiện để căn giữa phần tử này theo chiều ngang trong không gian có sẵn:
- Phần tử có chiều rộng được chỉ định
- Lề trái và phải được đặt thành
auto
Nếu không có chiều rộng được chỉ định, các autogiá trị về cơ bản sẽ không có hiệu lực, đặt lề trái và lề phải thành 0hoặc bất cứ điều gì là không gian có sẵn bên trong phần tử mẹ.
Nó cũng cần được chỉ ra rằng autochỉ hữu ích cho căn giữa theo chiều ngang và do đó, việc sử dụng autocho các lề trên và dưới sẽ không căn giữa một phần tử theo chiều dọc, điều này có thể gây nhầm lẫn cho người mới bắt đầu.
Thu gọn lề
Lề dọc trên các phần tử khác nhau tiếp xúc với nhau (do đó không có nội dung, phần đệm hoặc đường viền ngăn cách chúng) sẽ thu gọn, tạo thành một lề duy nhất bằng với lề lớn hơn của các lề liền kề. Điều này không xảy ra ở lề ngang (trái và phải), chỉ theo chiều dọc (trên và dưới).
Để minh họa, hãy lấy HTML sau:
Collapsing Margins
Example text.Và CSS sau:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Trong ví dụ này, h2phần tử có lề dưới là 20px. Phần tử đoạn văn, ngay sau nó trong nguồn, có lề trên cùng được đặt ở 10px.
Thông thường, dường như độ dày lề dọc giữa h2đoạn văn và đoạn văn sẽ là tổng cộng 30px (20px + 10px). Nhưng do sự sụp đổ của lề, độ dày thực tế kết thúc là 20px. Điều này được thể hiện trong bút nhúng bên dưới:
Mặc dù lợi nhuận thu hẹp thoạt nhìn có vẻ không trực quan, nhưng chúng thực sự hữu ích vì một số lý do. Đầu tiên, chúng ngăn các phần tử trống thêm không gian lề dọc, thường là không mong muốn.
Thứ hai, chúng cho phép một cách tiếp cận nhất quán hơn để khai báo biên chung trên các phần tử trang. Ví dụ: các tiêu đề thường có khoảng trắng lề dọc, và các đoạn văn bản cũng vậy. Nếu lề không bị thu hẹp, các tiêu đề theo sau các đoạn văn (hoặc ngược lại) thường sẽ yêu cầu đặt lại lề trên một trong các phần tử để đạt được khoảng cách dọc nhất quán.
Thứ ba, thu gọn ký quỹ cũng áp dụng cho các phần tử lồng nhau. Nhìn vào cây bút sau:
Ở đây, phần tử đoạn văn có lề trên được đặt ở 30px và được lồng bên trong divphần tử có lề trên là 40px. Ngoài ra, h2phần tử có lề dưới 20px.
Một lần nữa, thông thường sẽ cho rằng tổng không gian lề dọc ở đây sẽ là 90px (20px + 40px + 30px), nhưng thay vào đó, tất cả các lề đều thu gọn thành một lề 40px duy nhất (cao nhất trong ba lề). Điều này hữu ích trong hầu hết các trường hợp vì không cần phải xác định lại bất kỳ lề trên cùng nào để loại bỏ không gian dọc thừa.
Lề âm
Như bạn có thể nghi ngờ, trong khi giá trị biên dương đẩy các phần tử khác ra xa, thì một biên âm sẽ kéo chính phần tử đó theo hướng đó hoặc kéo các phần tử khác về phía đó.
Dưới đây là ví dụ về vùng chứa có phần đệm và tiêu đề h2 có các lề âm tự kéo qua phần đệm đó trở lại các cạnh:
Xem
Trường hợp sử dụng phổ biến nhất của cây bút cho lề tiêu cực của Chris Coyier (@chriscoyier)
trên CodePen.
Đây là một ví dụ trong đó đoạn đầu tiên có lề dưới âm, kéo đoạn tiếp theo lên trên.
Hãy xem phần
kéo lề dưới của Bút ký do Chris Coyier (@chriscoyier) thực hiện
trên CodePen.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Làm | Làm | Làm | Làm |
IE6 dễ mắc phải lỗi float-margin kép, lỗi này có thể được giải quyết trong hầu hết các trường hợp bằng cách thêm display: inlinevào phần tử float.