คุณสมบัติ padding

คุณสมบัติ padding กำหนดช่องว่างภายใน ขององค์ประกอบ ค่าของคุณสมบัติคือ หน่วยใดๆ สำหรับขนาด โดยค่าเริ่มต้น เบราว์เซอร์แต่ละตัว อาจเพิ่มช่องว่างต่างๆ ให้กับองค์ประกอบ คุณสมบัตินี้เป็นคุณสมบัติแบบย่อสำหรับคุณสมบัติ padding-top, padding-right, padding-bottom, padding-left.

ไวยากรณ์

ตัวเลือก {
	padding: ค่า;
}

จำนวนพารามิเตอร์

คุณสมบัติ padding รับค่า 1, 2, 3 หรือ 4 ค่า โดยคั่นด้วยช่องว่าง:

จำนวน	คำอธิบาย
`1`	หนึ่งค่ากำหนดช่องว่างทุกด้านขององค์ประกอบ
`2`	ค่าแรกกำหนดช่องว่างด้านบนและด้านล่าง และค่าที่สอง - ด้านขวาและด้านซ้าย
`3`	ค่าแรกกำหนดช่องว่างด้านบน ค่าที่สอง - ด้านขวาและด้านซ้าย และค่าที่สาม - ด้านล่าง
`4`	ค่าแรกกำหนดช่องว่างด้านบน ค่าที่สอง - ด้านขวา ค่าที่สาม - ด้านล่าง และค่าที่สี่ - ด้านซ้าย

ตัวอย่าง

ในกรณีนี้ ตามค่าเริ่มต้น ช่องว่างภายใน จะเป็นศูนย์และข้อความจะถูกดันติดกับขอบเขต ของบล็อก:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

ตัวอย่าง

และตอนนี้เรามาทำช่องว่างภายใน ที่ 30px กัน:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

ตัวอย่าง

ตอนนี้ช่องว่างด้านบนและด้านล่างจะเป็น 20px และด้านขวากับด้านซ้าย - 5px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

ตัวอย่าง

ตอนนี้ช่องว่างด้านบน 5px, ด้านขวา - 15px, ด้านล่าง - 25px, ด้านซ้าย - 35px:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

ดูเพิ่มเติม

คุณสมบัติ margin,
ซึ่งกำหนดช่องว่างภายนอก