กลับมากับเรื่องของ Margin collapsing
ซึ่งเป็นเรื่องเล็ก ๆ น้อย ๆ แต่พวกเราควรจะรู้
เริ่มจากดูรูปประกอบอันแรกก่อน
เมื่อเรามี div สองอัน โดยกำหนด margin ไว้ 20px ถ้าเราสั่ง float:left; clear:both; ไว้ใน div เราจะได้ตามแบบรูปนี่ละ
แต่ถ้าเราไม่ได้ใส่ไว้ละ ตามปรกติที่เคยบอกไว้ div มันจะเป็น display:block; อยู่แล้ว ดังนั้นมันจะขึ้นบรรทัดใหม่ จะได้ตามรูป
จะเห็นว่า ด้านล่างของ div บน กับด้านบนของ div ล่าง จะซ้อนกัน นี่ละ Margin collapsing
แล้วถ้าเกิดมัน margin ไม่เท่ากันละ จะเป็นยังไง ตามมาดูอันต่อไป
คราวนี้ div บนมี margin-bottom:30px; และ div ล่างมี margin-top:20px; ซึ่งตามจริงที่จะปรากฎจะเป็นดังนี้
จะเห็นว่า มันจะยึดหลักว่า margin ตัวไหนเยอะกว่า จะใช้อันนั้น
มาดูตัวอย่างสุดท้ายกันนะ ดูที่รูปประกอบเลย
กรณีนี้ ส่วนของเนื้อหา อยู่ภายใน div หรือเป็น div ใน div กรณีนี้จะได้ผลลัพธ์ยังไงลองคิดดูก่อน
มันจะยึดหลัก margin ที่เยอะกว่าไว้ ซึ่งก็จะได้ผลดังรูปครับ