Thuộc tính đệm CSS
Thí dụ
Đặt phần đệm cho tất cả bốn cạnh của phần tử <p> thành 35 pixel:
p {
padding: 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
Phần đệm của một phần tử là khoảng trống giữa nội dung và đường viền của phần tử đó.
Thuộc padding
tính này là một thuộc tính viết tắt cho:
Lưu ý: Padding tạo thêm không gian bên trong một phần tử, trong khi margin tạo thêm không gian xung quanh một phần tử.
Thuộc tính này có thể có từ một đến bốn giá trị.
Nếu thuộc tính padding có bốn giá trị:
- đệm: 10px 5px 15px 20px;
- đệm trên cùng là 10px
- padding bên phải là 5px
- đệm dưới cùng là 15px
- đệm bên trái là 20px
Nếu thuộc tính padding có ba giá trị:
- đệm: 10px 5px 15px;
- đệm trên cùng là 10px
- đệm phải và trái là 5px
- đệm dưới cùng là 15px
Nếu thuộc tính padding có hai giá trị:
- đệm: 10px 5px;
- đệm trên và dưới là 10px
- đệm phải và trái là 5px
Nếu thuộc tính padding có một giá trị:
- đệm: 10px;
- tất cả bốn paddings là 10px
Lưu ý: Giá trị âm không được 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.padding = "100px 20px" |
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 | |||||
---|---|---|---|---|---|
padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
padding: length|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
% | Specifies the padding in percent of the width of the containing element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Đặt phần đệm 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 {
padding: 35px 70px;
}
Thí dụ
Đặt phần đệm 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 {
padding: 35px 70px 50px;
}
Thí dụ
Đặt phần đệm 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 {
padding: 35px 70px 50px 90px;
}
Các trang liên quan
Hướng dẫn CSS: CSS Padding
Hướng dẫn CSS: Mô hình hộp CSS
Tham chiếu DOM HTML: thuộc tính padding