CSS padding คุณสมบัติ
- ข้างหลัง overscroll-behavior-y
- หน้าต่อไป padding-block
การกำหนดและการใช้งาน
คุณสมบัติย่อย padding กำหนดคุณสมบัติเนื้อเยื่อด้านในทั้งหมดในการประกาศเดียว
คำอธิบาย
คุณสมบัติย่อยนี้กำหนดความกว้างของเนื้อเยื่อด้านในทั้งหมดขององค์ประกอบ หรือกำหนดความกว้างของเนื้อเยื่อด้านในของแต่ละด้าน สำหรับองค์ประกอบแนวรายลำดับที่ไม่ใช่แทนที่ การกำหนดเนื้อเยื่อด้านในจะไม่ส่งผลต่อการคำนวณความสูงของแนว ดังนั้น องค์ประกอบที่มีเนื้อเยื่อด้านในและพื้นหลังอาจจะขยายตัวไปยังแนวอื่น หรืออาจจะทับกับเนื้อหาอื่น พื้นหลังขององค์ประกอบจะขยายผ่านเนื้อเยื่อด้านใน ไม่อนุญาตให้กำหนดค่าเนื้อเยื่อด้านในลบ
หมายเหตุ:ไม่อนุญาตให้ใช้ค่าลบ
ตัวอย่าง 1
padding:10px 5px 15px 20px;
- เนื้อเยื่อด้านบนคือ 10px
- เนื้อเยื่อด้านขวาคือ 5px
- เนื้อเยื่อด้านล่างคือ 15px
- เนื้อเยื่อด้านซ้ายคือ 20px
ตัวอย่าง 2
padding:10px 5px 15px;
- เนื้อเยื่อด้านบนคือ 10px
- เนื้อเยื่อด้านขวาและด้านซ้ายคือ 5px
- เนื้อเยื่อด้านล่างคือ 15px
ตัวอย่าง 3
padding:10px 5px;
- เนื้อเยื่อด้านบนและด้านล่างคือ 10px
- เนื้อเยื่อด้านขวาและด้านซ้ายคือ 5px
ตัวอย่าง 4
padding:10px;
- เนื้อเยื่อด้านในสี่ด้านทั้งหมดคือ 10px
ดูเพิ่มเติมที่:
ตัวอย่าง CSSCSS ขอบด้านใน
คู่มืออ้างอิง HTML DOMคุณสมบัติ padding
ระบบการใช้งาน CSS
padding: length|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| auto | โปรแกรมบราวเซอร์คำนวณเนื้อเยื่อด้านใน |
| length | กำหนดค่าเนื้อเยื่อด้านในด้วยหน่วยมาตรฐานเช่นพิกเซล ซีเมนต์ และค่าเริ่มต้นคือ 0px |
| % | กำหนดเนื้อเยื่อด้านในเป็นร้อยละของความกว้างขององค์ประกอบพ่อ |
| inherit | กำหนดให้มีการสืบทอดเนื้อเยื่อด้านในจากองค์ประกอบพ่อ |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | 0 |
|---|---|
| มีการสืบทอด: | no |
| เวอร์ชั่น: | CSS1 |
| JavaScript ระบบการใช้งาน: | object.style.padding="10px 5px" |
TIY ตัวอย่าง
- คุณสมบัติเนื้อเยื่อด้านในทั้งหมดในการประกาศเดียว
- ตัวอย่างนี้แสดงว่าการใช้คุณสมบัติย่อยแบบซ้ำที่จะกำหนดความเป็นช่องของเนื้อหาทั้งหมดในการประกาศเดียว สามารถมีค่าหนึ่งถึงสี่ค่า
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางบอกว่าเฉพาะเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- ข้างหลัง overscroll-behavior-y
- หน้าต่อไป padding-block
