Thuộc tính đệm kiểu
Thí dụ
Đặt phần đệm của phần tử <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Định nghĩa và Cách sử dụng
Thuộc tính padding đặt hoặc trả về padding của một phần tử.
Thuộc tính này có thể nhận từ một đến bốn giá trị:
Cả thuộc tính margin và thuộc tính padding đều chèn khoảng trắng xung quanh một phần tử. Tuy nhiên, sự khác biệt là lề chèn không gian xung quanh đường viền, trong khi padding chèn không gian bên trong đường viền của một phần tử.
- Một giá trị, như: div {padding: 50px} - tất cả bốn cạnh sẽ có đệm 50px
- Hai giá trị, chẳng hạn như: div {padding: 50px 10px} - phần đệm trên cùng và dưới cùng sẽ là 50px, phần đệm bên trái và bên phải sẽ là 10px
- Ba giá trị, chẳng hạn như: div {padding: 50px 10px 20px} - phần đệm trên cùng sẽ là 50px, phần đệm bên trái và bên phải sẽ là 10px, phần đệm dưới cùng sẽ là 20px
- Bốn giá trị, chẳng hạn như: div {padding: 50px 10px 20px 30px} - phần đệm trên cùng sẽ là 50px, phần đệm bên phải sẽ là 10px, phần đệm phía dưới sẽ là 20px, phần đệm bên trái sẽ là 30px
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| padding | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại thuộc tính padding:
object.style.padding
Đặt thuộc tính padding:
object.style.padding = "%|length|initial|inherit"
Giá trị tài sản
| Value | Description |
|---|---|
| % | Defines the padding in % of the width of the parent element |
| length | Defines the padding in length units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | 0 |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho phần đệm của một phần tử |
| Phiên bản CSS | CSS1 |
Các ví dụ khác
Thí dụ
Thay đổi phần đệm của tất cả bốn cạnh của phần tử <div> thành "25px":
document.getElementById("myDiv").style.padding = "25px";
Thí dụ
Trả lại phần đệm của phần tử <div>:
alert(document.getElementById("myDiv").style.padding);
Thí dụ
Sự khác biệt giữa thuộc tính margin và thuộc tính padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Các trang liên quan
Hướng dẫn CSS: CSS Padding
Tham chiếu CSS: thuộc tính padding
❮ Đối tượng phong cách