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