Kas ir robežu saplūšana CSS?

Marginu saplūšana ir CSS parādība, kad divi vai vairāki blakus esoši vertikālie robežlīnijas saplūst vienā. Šīs kopējās robežas lielums tiek noteikts pēc lielākās saplūstošo robežu vērtības.

Galvenie saplūšanas noteikumi:

• Saplūst tikai vertikālie robežlīnijas (margin-top un margin-bottom). Horizontālās robežlīnijas nesaplūst.
• Saplūšana notiek tikai starp blakus esošo elementu robežlīnijām, ja starp tām nav citu elementu, aizpildījuma (padding), robežlīniju (border) vai bloka satura.
• Pirmā bērna augšējā robežlīnija saplūst ar tās vecāka augšējo robežlīniju, ja starp tām nav padding, border vai cita satura.
• Pēdējā bērna apakšējā robežlīnija saplūst ar tās vecāka apakšējo robežlīniju, ja starp tām nav padding, border vai cita satura.
• Tukša elementa augšējās un apakšējās robežlīnijas var saplūst, ja tajā nav padding, border vai satura.
• Ja viena no saplūstošajām robežlīnijām ir negatīva, galīgais izmērs ir pozitīvo un negatīvo vērtību summa (vai absolūtā vērtība, ja abas ir negatīvas un kopējā vērtība ir mazāka par nulli).

Piemērs:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Šajā gadījumā vertikālais attālums starp box1 un box2 būs 30px (lielākais no 20px un 30px), nevis 50px.

Veidi, kā izvairīties no saplūšanas:

• Pievienot padding vai border starp elementiem.
• Izveidot jaunu formatēšanas bloku (piemēram, ar overflow: hidden, display: flow-root vai plūstošiem elementiem).
• Izmantot display: inline-block, display: flex vai display: grid elementiem.
• Izmantot absolūto pozicionēšanu.