คุณสมบัติ CSS Padding
ซีเอสเอ padding คุณสมบัติที่ใช้ในการสร้างพื้นที่รอบ ๆ เนื้อหา
คุณสมบัติ padding กำหนดขนาดของพื้นที่สีขาวระหว่างเนื้อหาองค์ประกอบและชายแดนองค์ประกอบ
องค์ประกอบนี้มีช่องว่างของ 50px
Padding CSS
คุณสมบัติ CSS padding กำหนดพื้นที่สีขาวระหว่างเนื้อหาองค์ประกอบและชายแดนองค์ประกอบ
ช่องว่างภายในเคลียร์พื้นที่รอบ ๆ เนื้อหา (ภายในชายแดน) ขององค์ประกอบ
 | หมายเหตุ: padding รับผลกระทบจากสีพื้นหลังขององค์ประกอบ! |
|---|
ด้วย CSS, คุณมีการควบคุมเต็มรูปแบบผ่านช่องว่างภายใน มีคุณสมบัติ CSS สำหรับการตั้งค่า padding สำหรับแต่ละด้านขององค์ประกอบคือ (ด้านบนขวาล่างและจากซ้าย)
padding - บุคคลด้าน
CSS มีคุณสมบัติสำหรับการระบุช่องว่างสำหรับแต่ละด้านขององค์ประกอบ:
-
padding-top -
padding-right -
padding-bottom -
padding-left
ทั้งหมดคุณสมบัติ padding สามารถมีค่าต่อไปนี้:
- ความยาว - ระบุช่องว่างใน px, pt, cm ฯลฯ
- % - ระบุช่องว่างใน% ของความกว้างขององค์ประกอบที่มี
- ได้รับมรดก - ระบุว่าช่องว่างที่ควรจะได้รับมรดกมาจากองค์ประกอบหลัก
ตัวอย่างต่อไปนี้กำหนดช่องว่างภายในที่แตกต่างกันทั้งสี่ด้านของ <p> องค์ประกอบ:
ตัวอย่าง
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} ลองตัวเอง» padding - คุณสมบัติชวเลข
เพื่อตัดรหัสที่มันเป็นไปได้ที่จะระบุคุณสมบัติทั้งหมด padding หนึ่งในสถานที่ให้บริการ
padding คุณสมบัติเป็นที่พักสำหรับคุณสมบัติของชวเลข padding บุคคลต่อไปนี้:
-
padding-top -
padding-right -
padding-bottom -
padding-left
ดังนั้นนี่คือวิธีการทำงาน:
หาก padding แห่งนี้มีสี่ค่า:
- padding: 50px 75px 25 พิกเซล 100px;
- ช่องว่างด้านบนคือ 25 พิกเซล
- ช่องว่างภายในที่เหมาะสมเป็น 50px
- padding ล่างคือ 75px
- padding ซ้าย 100px
หาก padding แห่งนี้มีสามค่า:
- padding: 50px 75px 25 พิกเซล;
- ช่องว่างด้านบนคือ 25 พิกเซล
- paddings ซ้ายและขวาเป็น 50px
- padding ล่างคือ 75px
หาก padding แห่งนี้มีสองค่า:
- padding: 25 พิกเซล 50px;
- paddings บนและด้านล่างมี 25 พิกเซล
- paddings ซ้ายและขวาเป็น 50px
ถ้า padding ทรัพย์สินมีค่าที่หนึ่ง:
- padding: 25 พิกเซล;
- ทั้งสี่ paddings มี 25 พิกเซล
ตัวอย่างเพิ่มเติม
ทุกคุณสมบัติในหนึ่งช่องว่างภายในประกาศ
ตัวอย่างนี้แสดงให้เห็นถึงคุณสมบัติที่จดชวเลขสำหรับการตั้งค่าทั้งหมดของคุณสมบัติ padding ในหนึ่งประกาศจะมี 1-4 ค่า
ตั้ง padding ซ้าย
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่า padding ซ้ายของ <p> องค์ประกอบ
ตั้งค่า padding ขวา
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่า padding ด้านขวาของ <p> องค์ประกอบ
ตั้งค่า padding ด้านบน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่า padding ด้านบนของ <p> องค์ประกอบ
ตั้งค่า padding ด้านล่าง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่า padding ด้านล่างของ <p> องค์ประกอบ
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
คุณสมบัติทั้งหมด CSS Padding
| คุณสมบัติ | ลักษณะ |
|---|---|
| padding | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดคุณสมบัติ padding หนึ่งในการประกาศ |
| padding-bottom | ตั้ง padding ด้านล่างขององค์ประกอบ |
| padding-left | ตั้ง padding ซ้ายขององค์ประกอบ |
| padding-right | ตั้ง padding ขวาขององค์ประกอบ |
| padding-top | ตั้ง padding ด้านบนขององค์ประกอบ |