گاهی اوقات حاشیه (Margin) های بالا و پایین المان ها با یکدیگر ترکیب میشود. به این اتفاق در CSS، فروپاشی حاشیه (Margin collapsing) گفته میشود. این موضوع یکی از مسائل مهم مرتبط با حاشیه ها در CSS به شمار میرود.
در فروپاشی حاشیه، حاشیه های بالا و پایین المان ها به یکی از حاشیه ها که بزرگتر است فروپاشی میشود. برای نمونه در مثال زیر برای المان <h1> حاشیه پایین 50 پیکسلی و برای المان <p> حاشیه بالای 40 پیکسلی درنظر گرفته شده است.
h1 {
margin: 0 0 50px 0;
}
p {
margin: 40px 0 0 0;
}فرض کنید دو المان <h1> و <p> مطابق نمونه زیر در بخش <body> سند قرار دارند.
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
بر اساس این حاشیه ها، ممکن است تصور کنید فاصله بین المان <h1> و <p> باید برابر با 90 پیکسل (50+40=90) یاشد. اما به دلیل Margin collapsing فاصله میان این دو المان تنها 50 پیکسل (برابر با حاشیه بزرگتر) خواهد بود.
تصویر زیر نمایی از نتیجه استایل قبل روی این المان ها را نمایش میدهد. همانطور که مشاهده میکنید حاشیه بالای المان <p> روی بخشی از حاشیه پایین المان <h1> قرار میگیرد و حاشیه ها با یکدیگر ترکیب میشوند:
توجه داشته باشید فروپاشی حاشیه صرفا در مورد حاشیه های بالا و پایین رخ میدهد و روی حاشیه های راست و چپ تأثیری ندارد.
