คุณสมบัติ padding

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

ไวยากรณ์

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

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

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม