Thuộc tính margin CSS
Thí dụ
Đặt lề cho tất cả bốn cạnh của phần tử <p> thành 35 pixel:
p {
margin: 35px;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc margin
tính đặt lề cho một phần tử và là thuộc tính viết tắt cho các thuộc tính sau:
Nếu thuộc tính ký quỹ có bốn giá trị:
- lề: 10px 5px 15px 20px;
- lề trên là 10px
- lề phải là 5px
- lề dưới là 15px
- lề trái là 20px
Nếu thuộc tính ký quỹ có ba giá trị:
- lề: 10px 5px 15px;
- lề trên là 10px
- lề phải và trái là 5px
- lề dưới là 15px
Nếu thuộc tính ký quỹ có hai giá trị:
- lề: 10px 5px;
- lề trên và dưới là 10px
- lề phải và trái là 5px
Nếu thuộc tính ký quỹ có một giá trị:
- lề: 10px;
- cả bốn lề đều là 10px
Lưu ý: Giá trị âm được cho phép.
Giá trị mặc định: | 0 |
---|---|
Thừa hưởng: | không |
Hoạt hình: | có, hãy xem các thuộc tính riêng lẻ . Đọc về hoạt hình |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.margin = "100px 50px" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
margin: length|auto|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thu gọn ký quỹ
Lề trên và dưới của các phần tử đôi khi được thu gọn thành một lề duy nhất bằng lề lớn nhất trong hai lề.
Điều này không xảy ra trên lề ngang (trái và phải)! Chỉ lề dọc (trên và dưới)!
Hãy xem ví dụ sau:
Thí dụ
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Trong ví dụ trên, phần tử <p class = "a"> có lề trên và dưới là 30px. Phần tử <p class = "b"> có lề trên và dưới là 20px.
Điều này có nghĩa là lề dọc giữa <p class = "a"> và <p class = "b"> phải là 50px (30px + 20px). Nhưng do sự sụp đổ của ký quỹ, ký quỹ thực tế cuối cùng là 30px!
Các ví dụ khác
Thí dụ
Đặt lề cho phần tử <p> thành 35 pixel cho trên cùng và dưới cùng và 70 pixel cho bên phải và bên trái:
p {
margin: 35px 70px;
}
Thí dụ
Đặt lề cho phần tử <p> thành 35 pixel cho trên cùng, 70 pixel cho bên phải và bên trái và thành 50 pixel cho phần dưới:
p {
margin: 35px 70px 50px;
}
Thí dụ
Đặt lề cho phần tử <p> thành 35 pixel cho trên cùng, 70 pixel cho bên phải, 50 pixel cho phần dưới và 90 pixel cho bên trái:
p {
margin: 35px 70px 50px 90px;
}
Các trang liên quan
Hướng dẫn CSS: CSS Margin
Hướng dẫn CSS: Mô hình hộp CSS
Tham chiếu DOM HTML: thuộc tính ký quỹ