Thuộc tính đệm kiểu
Ví dụ
Đặt phần đệm của phần tử <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Hãy tự mình thử »Sự miêu tả
Thuộc tính đệm đặt hoặc trả về khoảng đệm 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 lề và thuộc tính đệm đều chèn khoảng trắng xung quanh một phần tử. Tuy nhiên, điểm khác biệt là lề sẽ chèn khoảng trắng xung quanh đường viền, trong khi phần đệm sẽ chèn khoảng trắng bên trong đường viền của một phần tử.
- Một giá trị, như: div {padding: 50px} - cả bốn cạnh sẽ có phần đệm là 50px
- Hai giá trị, như: div {padding: 50px 10px} - phần đệm trên và dưới sẽ là 50px, phần đệm bên trái và bên phải sẽ là 10px
- Ba giá trị, 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 phía dưới sẽ là 20px
- Bốn giá trị, 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 dưới cùng 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ả về thuộc tính đệm:
object .style.padding
Đặt thuộc tính đệm:
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ả về: | Một Chuỗi, biểu diễn phần đệm của một phần tử |
Phiên bản CSS | CSS1 |
Thêm ví dụ
Ví dụ
Thay đổi phần đệm của cả bốn cạnh của phần tử <div> thành "25px":
document.getElementById("myDiv").style.padding = "25px";
Hãy tự mình thử »Ví dụ
Trả về phần đệm của phần tử <div>:
alert(document.getElementById("myDiv").style.padding);
Hãy tự mình thử »Ví dụ
Sự khác biệt giữa thuộc tính lề và thuộc tính đệm:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS Padding
Tham chiếu CSS: thuộc tính đệm