โมเดลกล่อง: ปริมาณช่องว่างของ CSS

ปริมาณช่องว่างภายในองค์ประกอบอยู่ระหว่างเส้นขอบและเนื้อหาเนียน。ขอบเขตดังกล่าวสามารถควบคุมด้วยคุณสมบัติ padding ที่ง่ายที่สุด。

คุณสมบัติ padding ของ CSS กำหนดพื้นที่ช่องว่างระหว่างขอบเขตและเนื้อหาขององค์ประกอบ.

CSS padding attribute

คุณสมบัติ padding ของ CSS กำหนดจุดชาติขององค์ประกอบ คุณสมบัติ padding ยอมรับค่าขนาดหรือสัดส่วนเปอร์เซ็นต์ แต่ไม่อนุญาตให้ใช้ค่าลบ.

ตัวอย่าง: ถ้าคุณต้องการให้จุดชาติของขนานทั้งหมดมีจุดชาติ 10 พิกเซล แล้ว คุณจะต้องทำเช่นนี้:

h1 {padding: 10px;}

คุณยังสามารถตั้งค่าจุดชาติของขนานตามลำดับของขนานที่สูง ขนานขวา ขนานล่าง และขนานซ้าย และแต่ละขนานอาจใช้หน่วยที่แตกต่างกันหรือสัดส่วนเปอร์เซ็นต์:

h1 {padding: 10px 0.25em 2ex 20%;}

คุณสมบัติจุดชาติของขนานเดี่ยว

ยังเข้าใจได้ด้วย การใช้คุณสมบัติที่แยกออกมาสี่คุณสมบัติ ตั้งค่าจุดชาติของขนานที่สูง ขนานขวา ขนานล่าง และขนานซ้าย:

คุณอาจจะคิดแล้ว กฎระเบียบด้านล่างนี้ทำงานอย่างเดียวกับกฎระเบียบย่อที่กล่าวข้างต้น:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

ค่าเปอร์เซ็นต์ของจุดชาติ

ก่อนหน้านี้ได้กล่าวไปแล้ว สามารถตั้งค่าสัดส่วนเปอร์เซ็นต์ของจุดชาติขององค์ประกอบได้ สัดส่วนเปอร์เซ็นต์นี้จะถูกคำนึงตามความกว้างของตัวปลอม parent อย่างเดียวกับของขอบเขต ดังนั้น ถ้าความกว้างของตัวปลอม parent เปลี่ยนแปลง พวกเขาก็จะเปลี่ยนแปลงด้วย.

กฎระเบียบด้านล่างนี้จะตั้งค่าจุดชาติของบทความเป็นสัดส่วนของความกว้างของตัวปลอม parent.

p {padding: 10%;}

ตัวอย่าง: ถ้าตัวปลอมพ่อของบทความเป็นตัวปลอม div แล้ว จุดชาติของบทความจะต้องคำนึงถึงความกว้างของ div.

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

แจ้งเตือน:จุดชาติที่ตรงข้ามของขนานและตรงข้ามของขนานฝั่งซ้ายของขนาน; คือ สัดส่วนเปอร์เซ็นต์ของจุดชาติที่ตรงข้ามของขนานจะถูกตั้งค่าตามความกว้างของตัวปลอม ไม่ใช่ตามความสูง.

ตัวอย่างของ CSS จุดชาติ:

คุณสมบัติจุดชาติทั้งหมดในการประกาศเดียว
ตัวอย่างนี้แสดงวิธีการใช้คุณสมบัติย่อลงเพื่อตั้งค่าคุณสมบัติจุดชาติของแถวทั้งหมดในการประกาศเดียว ซึ่งอาจมีค่าหนึ่งถึงสี่ค่า.
ตั้งค่าจุดชาติฝั่งล่าง 1
ตัวอย่างนี้แสดงวิธีการใช้หน่วยเมตรเพื่อตั้งค่าจุดชาติฝั่งล่างของแถว.
ตั้งค่าจุดชาติฝั่งล่าง 2
ตัวอย่างนี้แสดงวิธีการใช้สัดส่วนเปอร์เซ็นต์เพื่อตั้งค่าจุดชาติฝั่งล่างของแถว.
ตั้งค่าจุดชาติฝั่งซ้าย 1
ตัวอย่างนี้แสดงวิธีการใช้หน่วยเมตรเพื่อตั้งค่าจุดชาติฝั่งซ้ายของแถว.
ตั้งค่าจุดชาติฝั่งซ้าย 2
ตัวอย่างนี้แสดงวิธีการใช้สัดส่วนเปอร์เซ็นต์เพื่อตั้งค่าจุดชาติฝั่งซ้ายของแถว.
ตั้งมุมด้านขวา 1
ตัวอย่างนี้แสดงว่าจะใช้ค่าเซนติเมตรเพื่อตั้งมุมด้านขวาของแถว
ตั้งมุมด้านขวา 2
ตัวอย่างนี้แสดงว่าจะใช้ค่าเปอร์เซ็นต์เพื่อตั้งมุมด้านขวาของแถว
ตั้งมุมด้านบน 1
ตัวอย่างนี้แสดงว่าจะใช้ค่าเซนติเมตรเพื่อตั้งมุมด้านบนของแถว
ตั้งมุมด้านบน 2
ตัวอย่างนี้แสดงว่าจะใช้ค่าเปอร์เซ็นต์เพื่อตั้งมุมด้านบนของแถว

attribute มุมด้านใน CSS

attribute คำอธิบาย
padding ความหมายของตัวแปลระบุ
padding-bottom ตั้งมุมด้านล่างขององค์ประกอบ
padding-left ตั้งมุมด้านซ้ายขององค์ประกอบ
padding-right ตั้งมุมด้านขวาขององค์ประกอบ
padding-top ตั้งมุมด้านบนขององค์ประกอบ