Mis on äärte kokkuvarisemine CSS-is?

Marginite kokkukleepumine on CSS-i nähtus, kus kaks või enam kõrval asuvat vertikaalset piiri ühinevad üheks. Selle ühise piiri suurus määratakse suurima kokkukleepuvate piiride väärtuse järgi.

Kokkukleepumise põhireeglid:

• Kokkukleepuvad ainult vertikaalsed piirid (margin-top ja margin-bottom). Horisontaalsed piirid ei kokkukleebi.
• Kokkukleepumine toimub ainult naaberelementide piiride vahel, kui nende vahel ei ole teisi elemente, täitmist (padding), piire (border) või blokisisu.
• Esimese lapse ülemine piir kokkukleepub tema vanema ülemise piiriga, kui nende vahel ei ole padding, border või muud sisu.
• Viimase lapse alumine piir kokkukleepub tema vanema alumise piiriga, kui nende vahel ei ole padding, border või muud sisu.
• Tühi elemendi ülemine ja alumine piir võivad omavahel kokku kasvada, kui neil ei ole padding, border või sisu.
• Kui üks kokkukleepuvatest piiridest on negatiivne, on lõplik suurus positiivsete ja negatiivsete väärtuste summa (või absoluutväärtus, kui mõlemad on negatiivsed ja kogusumma on alla nulli).

Näide:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Selle puhul on box1 ja box2 vaheline vertikaalne kaugus 30px (kõige suurem 20px ja 30px vahel), mitte 50px.

Kuidas vältida kokkukleepumist:

• Lisada padding või border elementide vahele.
• Luua uus vormindusblokk (näiteks overflow: hidden, display: flow-root või ujuvad elemendid).
• Kasutada display: inline-block, display: flex või display: grid elementidele.
• Kasutada absoluutset positsioneerimist.