آموزش کوتاه شدن(Collapse) مارجین در CSS

گاهی اوقات دو مارجین تبدیل به یک مارجین می شوند و یکی از آنها از دست می رود و کوتاه می شود.

کوتاه شدن(Collapse) مارجین ها در CSS

گاهی اوقات مارجین های top و bottom از عناصر، به یک مارجین تکی که برابر با بزرگترین مارجین از این دو مارجین است، کوتاه می شوند.

این کار برای مارجین های left و right اتفاق نمی افتد؛ بلکه تنها روی مارجین های top و bottom اتفاق می افتد. به مثال زیر توجه کنید:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

در این مثال، عنصر h1 یک مارجین bottom برابر با 50px دارد و عنصر h2 یک مارجین top برابر با 20px دارد. بنابراین مارجین هردوی h1 و h2 باید (50px + 20px) یعنی 70px باشد. اما به خاطر کوتاه شدن مارجین ها یا همان collapse، مارجین حقیقی برابر با 50px است.