Mi az a határok összeomlása a CSS-ben?

A margók összeolvadása (margin collapsing) egy CSS jelenség, amely során két vagy több egymás melletti blokk vertikális margója egyesül egyetlen margóvá. Ennek a közös margónak a méretét a legnagyobb érték határozza meg a összeolvadó margók közül.

Az összeolvadás fő szabályai:

• Csak a vertikális margók (margin-top és margin-bottom) olvadnak össze. A horizontális margók nem.
• Csak az egymás mellett lévő elemek margói olvadnak össze, ha közöttük nincs más elem, padding, border vagy tartalom.
• Az első gyermek felső margója összeolvad az őt tartalmazó elem felső margójával, ha közöttük nincs padding, border vagy más tartalom.
• Az utolsó gyermek alsó margója összeolvad az őt tartalmazó elem alsó margójával, ha közöttük nincs padding, border vagy más tartalom.
• Egy üres elem felső és alsó margója összeolvad, ha nincs padding, border vagy tartalom.
• Ha valamelyik összeolvadó margó negatív, akkor a végső méret a pozitív és negatív értékek összegével egyezik meg (vagy abszolút érték, ha mindkettő negatív és az összeg kisebb nullánál).

Példa:

<div class="box1">Elem 1</div>
<div class="box2">Elem 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Ebben az esetben a box1 és box2 közötti vertikális távolság 30px lesz (a legnövebb érték a 20px és 30px közül), nem 50px.

A megelőzés módjai:

• Adjunk padding-t vagy border-t az elemek közé.
• Hozzunk létre egy új formázási blokkot (pl. overflow: hidden, display: flow-root vagy lebegő elemek segítségével).
• Használjunk display: inline-block, display: flex vagy display: grid értékeket az elemekhez.
• Alkalmazzunk abszolút pozícionálást.