Šta je kolaps granica u CSS?

Spajanje margina (margin collapsing) je fenomen u CSS-u gde se vertikalne margine dva ili više susednih blokova spajaju u jednu marginu. Veličina te zajedničke margine određuje se najvećom vrednošću od margina koje se spajaju.

Glavna pravila spajanja:

• Spajaju se samo vertikalne margine (margin-top i margin-bottom). Horizontalne margine se ne spajaju.
• Spajaju se samo margine susednih elemenata ako između njih nema drugih elemenata, paddinga, bordera ili sadržaja bloka.
• Gornja margina prvog deteta će se spojiti sa gornjom marginom njegovog roditelja ako između njih nema padding, border ili drugog sadržaja.
• Donja margina poslednjeg deteta će se spojiti sa donjom marginom njegovog roditelja ako između njih nema padding, border ili drugog sadržaja.
• Gornje i donje margine praznog elementa mogu se spojiti ako nemaju padding, border ili sadržaj.
• Ako je jedna od margina koja se spaja negativna, konačna veličina je suma pozitivnih i negativnih vrednosti (ili apsolutna vrednost ako su obe negativne i suma je manja od nule).

Primer:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

U ovom slučaju, vertikalna udaljenost između box1 i box2 biće 30px (najveća od 20px i 30px), a ne 50px.

Načini za sprečavanje spajanja:

• Dodajte padding ili border između elemenata.
• Kreirajte novi blok za formatiranje (npr. pomoću overflow: hidden, display: flow-root ili floating elemenata).
• Koristite display: inline-block, display: flex ili display: grid za elemente.
• Koristite apsolutno pozicioniranje.