Thuộc tính margin-bottom CSS
Thí dụ
Đặt lề dưới cho phần tử <p> thành 25 pixel:
p.ex1 {
margin-bottom: 25px;
}
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-bottom
tính đặt lề dưới cùng của một phần tử.
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.marginBottom = "100px" |
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-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
margin-bottom: length|auto|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom 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ề dưới cho phần tử <p> thành 10% chiều rộng của vùng chứa:
p.ex1 {
margin-bottom: 10%;
}
Thí dụ
Đặt lề dưới cho phần tử <p> thành 2 em:
p.ex1 {
margin-bottom: 2em;
}
Các trang liên quan
Hướng dẫn CSS: CSS Margin
Tham chiếu DOM HTML: thuộc tính marginBottom