เราสามารถให้ padding เป็นเปอร์เซ็นต์ได้หรือไม่?

2024 ผู้เขียน: Lynn Donovan | [email protected]. แก้ไขล่าสุด: 2023-12-15 23:54

เปอร์เซ็นต์ : NS การขยายความ ขนาดสัมพันธ์กับความกว้างของพื้นที่เนื้อหาขององค์ประกอบนั้น (เช่น ความกว้างภายในและไม่รวมถึง การขยายความ , เส้นขอบและระยะขอบขององค์ประกอบ) ดังนั้น หาก #wrapper ของคุณกว้าง 940px ให้ 5% การขยายความ = 0.05 × 940 พิกเซล = 47 พิกเซล

ดังนั้น padding สามารถเป็นเปอร์เซ็นต์ได้หรือไม่?

เปอร์เซ็นต์ : NS การขยายความ ขนาดสัมพันธ์กับความกว้างของพื้นที่เนื้อหาขององค์ประกอบนั้น (เช่น ความกว้างภายในและไม่รวมถึง การขยายความ , เส้นขอบและระยะขอบขององค์ประกอบ) ดังนั้น หาก #wrapper ของคุณกว้าง 940px ให้ 5% การขยายความ = 0.05 × 940 พิกเซล = 47 พิกเซล

ประการที่สอง CSS padding คืออะไร? NS การขยายความ ทรัพย์สินใน CSS กำหนดส่วนในสุดของโมเดลกล่อง สร้างช่องว่างรอบเนื้อหาขององค์ประกอบ ภายในระยะขอบและ/หรือเส้นขอบที่กำหนดไว้ การขยายความ ค่าถูกตั้งค่าโดยใช้ความยาวหรือเปอร์เซ็นต์ และไม่สามารถยอมรับค่าลบได้ ค่าเริ่มต้นหรือค่าดีฟอลต์สำหรับ all การขยายความ คุณสมบัติคือ 0

นอกจากนี้ การเติมคำนวณอย่างไร?

แปลว่า การขยายความ เป็น คำนวณ ตามความกว้างขององค์ประกอบหลัก (ควรสังเกตว่าในรูปแบบที่ไม่ใช่ flexbox การขยายความ ด้านบนและด้านล่างสัมพันธ์กับความกว้างของบล็อกที่มี)

เหตุใดช่องว่างภายในจึงส่งผลต่อความกว้าง

ตอนนี้ เนื่องจากวิธีการปรับขนาดกล่องใน CSS การเพิ่ม การขยายความ สู่องค์ประกอบของคุณ จะ เพิ่มไปยัง ขนาด ตั้งแต่ ความกว้าง ของ การขยายความ พื้นที่ จะ ถูกเพิ่มเข้าใน ความกว้าง ของพื้นที่เนื้อหา และดังนั้น ทั้งหมด ความกว้าง (และส่วนสูง) ของธาตุ จะ เพิ่มขึ้น.