CSS Padding
Padding ใช้เพื่อสร้างช่องว่างรอบๆ เนื้อหาขององค์ประกอบ ภายในขอบเขตที่กำหนดไว้
CSS Padding
คุณสมบัติ CSS paddingถูกใช้เพื่อสร้างพื้นที่รอบๆ เนื้อหาขององค์ประกอบ ภายในขอบเขตที่กำหนดไว้
ด้วย CSS คุณสามารถควบคุมช่องว่างภายในได้อย่างเต็มที่ มีคุณสมบัติสำหรับการตั้งค่าการเติมสำหรับแต่ละด้านขององค์ประกอบ (บน ขวา ล่าง และซ้าย)
Padding - แต่ละด้าน
CSS มีคุณสมบัติสำหรับระบุการเติมสำหรับแต่ละด้านขององค์ประกอบ:
padding-toppadding-rightpadding-bottompadding-left
คุณสมบัติการเติมทั้งหมดสามารถมีค่าต่อไปนี้:
- ความยาว - ระบุช่องว่างภายในเป็น px, pt, cm ฯลฯ
- % - ระบุช่องว่างภายในเป็น % ของความกว้างขององค์ประกอบที่มี
- สืบทอด - ระบุว่าช่องว่างภายในควรจะสืบทอดมาจากองค์ประกอบหลัก
หมายเหตุ:ไม่อนุญาตให้ใช้ค่าลบ
ตัวอย่าง
ตั้งค่าช่องว่างภายในที่แตกต่างกันสำหรับทั้งสี่ด้านของ <div> องค์ประกอบ:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - ทรัพย์สินชวเลข
ในการย่อโค้ด คุณสามารถระบุคุณสมบัติการเติมทั้งหมดในคุณสมบัติเดียวได้
คุณสมบัติpaddingเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติช่องว่างภายในแต่ละรายการต่อไปนี้:
padding-toppadding-rightpadding-bottompadding-left
นี่คือวิธีการทำงาน:
หากpaddingคุณสมบัติมีค่าสี่ค่า:
- ช่องว่างภายใน: 25px 50px 75px 100px;
- ช่องว่างภายในด้านบนคือ 25px
- ช่องว่างภายในด้านขวาคือ 50px
- ช่องว่างภายในด้านล่างคือ 75px
- ช่องว่างภายในด้านซ้ายคือ 100px
ตัวอย่าง
ใช้คุณสมบัติชวเลขช่องว่างภายในด้วยสี่ค่า:
div {
padding: 25px 50px 75px 100px;
}
หากpaddingคุณสมบัติมีสามค่า:
- ช่องว่างภายใน: 25px 50px 75px;
- ช่องว่างภายในด้านบนคือ 25px
- ช่องว่างภายในด้านขวาและด้านซ้ายคือ 50px
- ช่องว่างภายในด้านล่างคือ 75px
ตัวอย่าง
ใช้คุณสมบัติชวเลขช่องว่างภายในด้วยสามค่า:
div {
padding: 25px 50px 75px;
}
หากpaddingคุณสมบัติมีสองค่า:
- ช่องว่างภายใน: 25px 50px;
- ช่องว่างด้านบนและด้านล่างคือ 25px
- ช่องว่างภายในด้านขวาและด้านซ้ายคือ 50px
ตัวอย่าง
ใช้คุณสมบัติชวเลขช่องว่างภายในด้วยสองค่า:
div {
padding: 25px 50px;
}
หากpaddingคุณสมบัติมีค่าหนึ่งค่า:
- ช่องว่างภายใน: 25px;
- ช่องว่างภายในทั้งสี่มีขนาด 25px
ตัวอย่าง
ใช้คุณสมบัติชวเลขช่องว่างภายในด้วยค่าเดียว:
div {
padding: 25px;
}
ช่องว่างภายในและความกว้างขององค์ประกอบ
คุณสมบัติ CSS widthระบุความกว้างของพื้นที่เนื้อหาขององค์ประกอบ พื้นที่เนื้อหาคือส่วนที่อยู่ภายในช่องว่างภายใน เส้นขอบ และระยะขอบขององค์ประกอบ ( โมเดลกล่อง )
ดังนั้น หากองค์ประกอบมีความกว้างที่ระบุ ช่องว่างภายในที่เพิ่มไปยังองค์ประกอบนั้นจะถูกเพิ่มเข้ากับความกว้างทั้งหมดขององค์ประกอบ ซึ่งมักจะเป็นผลที่ไม่พึงประสงค์
ตัวอย่าง
ที่นี่ <div> องค์ประกอบจะได้รับความกว้าง 300px อย่างไรก็ตาม ความกว้างที่แท้จริงขององค์ประกอบ <div> จะเป็น 350px (300px + 25px ของช่องว่างภายในด้านซ้าย + 25px ของช่องว่างภายในด้านขวา):
div {
width: 300px;
padding: 25px;
}
box-sizingคุณสามารถใช้ คุณสมบัตินี้เพื่อรักษาความกว้างไว้ที่ 300px ได้ ไม่ว่าช่องว่างภายในจะเป็นจำนวนเท่าใด ทำให้องค์ประกอบคงความกว้างตามจริง หากคุณเพิ่มช่องว่างภายใน พื้นที่เนื้อหาที่มีอยู่จะลดลง
ตัวอย่าง
ใช้คุณสมบัติ box-sizing เพื่อรักษาความกว้างไว้ที่ 300px ไม่ว่าช่องว่างภายในจะเป็นเท่าใด:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
ตัวอย่างเพิ่มเติม
ตัวอย่างนี้สาธิตวิธีการตั้งค่าช่องว่างภายในด้านซ้ายขององค์ประกอบ <p>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าการเติมที่ถูกต้องขององค์ประกอบ <p>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าการเติมด้านบนขององค์ประกอบ <p>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าการเติมด้านล่างขององค์ประกอบ <p>
คุณสมบัติการเติม CSS ทั้งหมด
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |