Thuộc tính đệm CSS
Ví dụ
Đặt khoảng đệm cho cả bốn cạnh của phần tử <p> thành 35 pixel:
p {
padding: 35px;
}
Hãy tự mình thử »Thêm 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 cách giữa nội dung và đường viền của nó.
Thuộc tính padding
là thuộc tính viết tắt của:
Lưu ý: Phần đệm tạo thêm không gian trong một phần tử, trong khi lề tạo thêm không gian xung quanh 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 đệm có bốn giá trị:
- phần đệm:10px 5px 15px 20px;
- phần đệm trên cùng là 10px
- phần đệm bên phải là 5px
- phần đệm phía dưới là 15px
- phần đệm bên trái là 20px
Nếu thuộc tính đệm có ba giá trị:
- phần đệm:10px 5px 15px;
- phần đệm trên cùng là 10px
- phần đệm bên phải và bên trái là 5px
- phần đệm phía dưới là 15px
Nếu thuộc tính đệm có hai giá trị:
- phần đệm:10px 5px;
- phần đệm trên và dưới là 10px
- phần đệm bên phải và bên trái là 5px
Nếu thuộc tính đệm có một giá trị:
- phần đệm: 10px;
- tất cả bốn phần đệm đều là 10px
Lưu ý: Không 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.padding="100px 20px" 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 | |||||
---|---|---|---|---|---|
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 | Demo |
---|---|---|
length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | Demo ❯ |
% | Specifies the padding in percent of the width of the containing element | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví 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à thành 70 pixel cho bên phải và bên trái:
p {
padding: 35px 70px;
}
Hãy tự mình thử »Ví dụ
Đặt phần đệm 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à thành 50 pixel cho phần dưới cùng:
p {
padding: 35px 70px 50px;
}
Hãy tự mình thử »Ví dụ
Đặt phần đệm cho phần tử <p> thành 35 pixel cho phần trên cùng, 70 pixel cho phần bên phải, 50 pixel cho phần dưới cùng và thành 90 pixel cho phần bên trái:
p {
padding: 35px 70px 50px 90px;
}
Hãy tự mình thử »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 đệm