เมื่อเริ่มเรียน HTML และ CSS ใช้เวลาพอสมควรเข้าใจความต่างระหว่าง margin และ padding ใน box model บทความนี้จะแบ่งปันวิธีที่ช่วยให้แยกแยะได้ชัดเจน
CSS Box Model: การเข้าใจโครงสร้าง
คิด box model — คอนเทนเนอร์ที่ใส่คอมโพเนนต์เว็บไซต์ — เหมือนภาพในกรอบรูป:
- Content (เนื้อหา): ภาพเอง — สิ่งที่ต้องการใส่ในคอนเทนเนอร์
- Padding (ระยะภายใน): แผ่นรอง (matting) รอบภาพ — ทำให้กรอบใหญ่ขึ้น ใน CSS padding คือพื้นที่ระหว่างเนื้อหาและขอบ (border)
- Border (ขอบ): กรอบที่ครอบเนื้อหาและ padding
- Margin (ระยะนอก): พื้นที่ระหว่าง元素ที่อยู่ติดกัน (กรอบรูป) บน viewport (ผนัง)
เมื่อไหร่ควรใช้ Margin และ Padding?
โดยทั่วไป:
- ใช้ Margin เมื่อต้องการปรับตำแหน่ง元素相对于 元素อื่นบนหน้า
- ใช้ Padding เมื่อต้องการพื้นที่รอบเนื้อหาให้กว้างขึ้น
การกำหนด Margin และ Padding
ตัวอย่างโค้ดพื้นฐาน:
<style> #star-wars { background: ivory; border: 20px solid cyan; } #lotr { background: ivory; border: 20px solid green; } </style>
หากต้องการค่าต่างกันทุกด้าน:
#star-wars { margin-top: 10px; margin-bottom: 30px; margin-left: 5px; margin-right: 25px; padding-top: 20px; padding-right: 25px; padding-bottom: 35px; padding-left: 45px; }
มี shorthand property (ลำดับ TRBL: top, right, bottom, left):
margin: 10px 25px 30px 5px; /* top right bottom left */
หาก top/bottom เท่ากัน และ left/right เท่ากัน:
margin: 20px 30px; /* top/bottom left/right */
หากทุกด้านเท่ากัน:
margin: 30px; /* ทุกด้าน 30px */
สรุป
บทความนี้ทบทวน box model และอธิบายความต่าง: Margin จัดการพื้นที่นอกขอบ (outside border) ส่วน Padding จัดการพื้นที่ในขอบ (inside border) ลองเล่นกับค่าต่างๆ ในโค้ดจะช่วยให้เชี่ยวชาญได้เร็วขึ้น
