Thuộc tính lề 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
đặ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 lề 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 lề 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 lề 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 lề có một giá trị:
- lề: 10px;
- tất cả bốn lề đều là 10px
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.margin="100px 50px" 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 | 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 | Demo |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies a margin in percent of the width of the containing element | Demo ❯ |
auto | The browser calculates a 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ề cho phần tử <p> thành 35 pixel cho trên và dưới và 70 pixel cho bên phải và bên trái:
p {
margin: 35px 70px;
}
Hãy tự mình thử »Ví dụ
Đặt lề cho phần tử <p> thành 35 pixel cho phần trên cùng, 70 pixel cho bên phải và bên trái và 50 pixel cho phần dưới cùng:
p {
margin: 35px 70px 50px;
}
Hãy tự mình thử »Ví dụ
Đặt lề cho phần tử <p> thành 35 pixel ở trên cùng, 70 pixel ở bên phải, 50 pixel ở dưới cùng và 90 pixel ở bên trái:
p {
margin: 35px 70px 50px 90px;
}
Hãy tự mình thử »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 lề