บางครั้งระยะขอบทั้งสองก็ยุบลงเป็นระยะขอบเดียว
บางครั้งขอบด้านบนและด้านล่างขององค์ประกอบจะยุบเป็นอันเดียว มาร์จิ้นที่เท่ากับค่าที่ใหญ่ที่สุดของทั้งสองมาร์จิ้น
สิ่งนี้ไม่ได้เกิดขึ้นที่ระยะขอบซ้ายและขวา! เฉพาะขอบบนและล่างเท่านั้น!
ดูตัวอย่างต่อไปนี้:
การสาธิตการล่มสลายของมาร์จิ้น:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
ในตัวอย่างข้างต้น องค์ประกอบ <h1> มีระยะขอบด้านล่าง 50px และ <h2> องค์ประกอบมีระยะขอบด้านบนตั้งไว้ที่ 20px
สามัญสำนึกดูเหมือนจะแนะนำว่าระยะขอบแนวตั้งระหว่าง <h1> และ <h2> จะมีขนาดรวม 70px (50px + 20px) แต่เนื่องจากการล่มสลายของมาร์จิ้น ระยะขอบจริงจะอยู่ที่ 50px
คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติระยะขอบทั้งหมดในการประกาศครั้งเดียว
ตั้งค่าระยะขอบด้านล่างขององค์ประกอบ
ตั้งค่าระยะขอบซ้ายขององค์ประกอบ
ตั้งค่าระยะขอบด้านขวาขององค์ประกอบ
ตั้งค่าระยะขอบด้านบนขององค์ประกอบ