Thuộc tính lề dưới CSS
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính margin-bottom
thiết lập lề dưới của phần tử.
Lưu ý: Cho phép giá trị âm.
Giá trị mặc định: | 0 |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.marginBottom="100px" Hãy dùng thử |
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 | Demo |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies a bottom margin in percent of the width of the containing element | Demo ❯ |
auto | The browser calculates a bottom margin | Demo ❯ |
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 lề
Lề trên và lề 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 với lề lớn nhất của hai lề.
Điều này không xảy ra ở lề ngang (trái và phải)! Chỉ có lề dọc (trên và dưới)!
Hãy xem ví dụ sau:
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 thu gọn lề nên lề thực tế cuối cùng là 30px!
Thêm ví dụ
Ví 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%;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS Margin
Tham chiếu DOM HTML: thuộc tính lềBottom