Thuộc tính padding
Thuộc tính padding thiết lập khoảng đệm bên trong
phần tử. Giá trị của thuộc tính là
bất kỳ đơn vị
đo kích thước nào. Theo mặc định, mỗi trình duyệt
có thể thêm các khoảng đệm khác nhau cho phần tử.
Thuộc tính này là dạng viết tắt cho các thuộc tính
padding-top,
padding-right,
padding-bottom,
padding-left.
Cú pháp
bộ chọn {
padding: giá trị;
}
Số lượng tham số
Thuộc tính padding nhận 1,
2, 3 hoặc 4 giá trị,
được liệt kê cách nhau bởi dấu cách:
| Số lượng | Mô tả |
|---|---|
1 |
Một giá trị xác định khoảng đệm cho tất cả các phía của phần tử. |
2 |
Giá trị đầu tiên xác định khoảng đệm trên và dưới, giá trị thứ hai - phải và trái. |
3 |
Giá trị đầu tiên xác định khoảng đệm trên, giá trị thứ hai - phải và trái, giá trị thứ ba - dưới. |
4 |
Giá trị đầu tiên xác định khoảng đệm trên, giá trị thứ hai - phải, giá trị thứ ba - dưới, giá trị thứ tư - trái. |
Ví dụ
Trong trường hợp này, theo mặc định, khoảng đệm bên trong sẽ bằng 0 và văn bản sẽ bị ép sát vào đường viền của khối:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Ví dụ
Bây giờ hãy tạo khoảng đệm bên trong
là 30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Ví dụ
Bây giờ khoảng đệm trên và dưới sẽ là 20px,
còn phải và trái - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Ví dụ
Bây giờ khoảng đệm trên là 5px, phải -
15px, dưới - 25px, trái -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Xem thêm
-
thuộc tính
margin,
xác định khoảng đệm bên ngoài