Margin collapse เบื้องต้น

margin แนวตั้งของบล็อกที่ติดกัน (หรือพ่อ-ลูกในบางเงื่อนไข) อาจ ยุบรวม เป็นค่าที่ใหญ่กว่าฝั่งใดฝั่งหนึ่ง — ไม่ใช่บวกกันตรง ๆ

/* คาดหวังเว้น 50px แต่ได้ 30px ถ้า collapse เป็นค่า max */
h1 { margin-bottom: 20px; }
p  { margin-top: 30px; }

• เกิดกับ margin แนวตั้ง เป็นหลัก

• แนวนอนไม่ collapse แบบเดียวกัน

• padding / border ระหว่างกลางมักกันไม่ให้พ่อ-ลูกยุบรวม

ถ้าระยะห่างแนวตั้ง “ไม่เท่าผลบวก” ให้สงสัย margin collapse ก่อนโทษเบราว์เซอร์