کاربرد margin collapsing در box model چیست؟

در مدل جعبه‌ای (box model) CSS، margin collapsing یا «تجمیع حاشیه» یک رفتار خاص است که هنگام برخورد حاشیه‌های عمودی دو یا چند عنصر مجاور رخ می‌دهد. این پدیده باعث می‌شود حاشیه‌ها به جای جمع شدن، با هم ادغام شده و بزرگ‌ترین مقدار را اعمال کنند.

این ویژگی عمدتاً در حاشیه‌های عمودی (margin-top و margin-bottom) عناصر بلوکی رخ می‌دهد و سه حالت اصلی دارد:

حاشیه‌های مجاور فرزند و والد (در شرایط خاص)
حاشیه‌های عمودی عناصر مجاور هم‌سطح
حاشیه‌های عناصر خالی (بدون محتوا، padding یا border)

کاربردهای عملی margin collapsing

این مکانیسم در طراحی‌های واقعی چندین مزیت مهم دارد:

ایجاد فاصله‌های منطقی: در متن‌های چندپاراگرافی، فاصله بین پاراگراف‌ها به صورت خودکار تنظیم می‌شود.
ساده‌سازی چیدمان: نیاز به محاسبه دستی فاصله‌ها را کاهش می‌دهد.
حفظ خوانایی: از تجمع بیش از حد فاصله‌های سفید جلوگیری می‌کند.

نمونه کدهای مرتبط

مثال ۱: تجمیع حاشیه در عناصر مجاور

div {
  margin-top: 20px;
  margin-bottom: 30px;
}
/* فاصله نهایی بین دو div مجاور 30px خواهد بود (نه 50px) */

مثال ۲: حالت والد و فرزند

.parent {
  margin-top: 40px;
}
.child {
  margin-top: 15px;
}
/* حاشیه بالای والد 40px باقی می‌ماند (جمع نمی‌شود) */

مثال ۳: جلوگیری از margin collapsing

.element {
  padding: 1px; /* یا border: 1px solid transparent */
  margin-top: 20px;
}
/* وجود padding یا border از تجمیع حاشیه جلوگیری می‌کند */

خلاصه درس

تجمیع حاشیه فقط در جهت عمودی (top/bottom) اتفاق می‌افتد.
این رفتار در عناصر flexbox و grid رخ نمی‌دهد.
حاشیه‌های منفی نیز می‌توانند تجمیع شوند (کوچک‌ترین مقدار مطلق اعمال می‌شود).
برای غیرفعال کردن این ویژگی می‌توان از padding یا border استفاده کرد.

درک صحیح از margin collapsing به طراحان کمک می‌کند فاصله‌بندی‌های دقیق‌تری ایجاد کنند و از رفتارهای غیرمنتظره در چیدمان جلوگیری نمایند. این ویژگی یکی از جنبه‌های مهم مدل جعبه‌ای است که در پروژه‌های واقعی به کرات با آن مواجه خواهید شد.

توسعه دهندگان

نیما جاهد