คุณสมบัติ 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,
ซึ่งกำหนดช่องว่างภายนอก