فروپاشی فاصله بیرونیCSS

فروپاشی فاصله بیرونی زمانی رخ می‌دهد که دو فاصله بیرونی (margin) به یک فاصله واحد تبدیل شوند.

در CSS، فاصله‌های بالا و پایین عناصر گاهی با هم ترکیب شده و به یک فاصله واحد تبدیل می‌شوند که مقدار آن برابر با بزرگ‌ترین مقدار از بین دو فاصله است.

 نکته مهم: فروپاشی فاصله فقط برای فاصله‌های بالا و پایین اتفاق می‌افتد، نه فاصله‌های چپ و راست!

مثال اول: ترکیب فاصله پایین و بالا بین دو عنصر

در مثال زیر، عنصر <h1> دارای فاصله پایین (margin-bottom) به اندازه ۵۰ پیکسل است و عنصر <h2> دارای فاصله بالا (margin-top) به اندازه ۲۰ پیکسل.

در حالت عادی، انتظار می‌رود فاصله عمودی بین این دو عنصر برابر با ۷۰ پیکسل باشد (۵۰ + ۲۰). اما به دلیل فروپاشی فاصله، مقدار واقعی فاصله برابر با ۵۰ پیکسل خواهد بود (بزرگ‌ترین مقدار بین دو فاصله).

h1 {
  margin-bottom: 50px;
}

h2 {
  margin-top: 20px;
}

مثال دوم: ترکیب فاصله‌های بالا و پایین بین عناصر مشابه

در این مثال، هر عنصر <p> دارای فاصله بالا و پایین به اندازه ۳۰ پیکسل است. بنابراین، فاصله عمودی بین دو عنصر <p> باید ۶۰ پیکسل باشد (۳۰ + ۳۰). اما به دلیل فروپاشی فاصله، مقدار واقعی فاصله بین آن‌ها فقط ۳۰ پیکسل خواهد بود.

p {
  margin-top: 30px;
  margin-bottom: 30px;
}

فهرست کامل ویژگی‌های CSS مربوط به Margin