Šta je sklapanje granica u CSS?

Spajanje margina (margin collapsing) je pojava u CSS-u gde se vertikalni margini susednih blokova spajaju u jedan. Veličina tog spojenog margina određuje se kao maksimalna vrednost od margina koje se spajaju.

Spajanje se dešava u sledećim slučajevima:

• Između susednih elemenata: Vertikalni margini dva susedna elementa se spajaju.

  <p>Pasus 1</p>
  <p>Pasus 2</p>
  

  Ako <p> ima margin-bottom i margin-top redom, ti margini se mogu spojiti.

• Između roditeljskog i njegovog prvog/poslednjeg deteta: Ako roditelj nema border, padding, display: flex, display: grid, overflow: hidden ili druge osobine koje stvaraju kontekst formatiranja, njegov gornji margin može se spojiti sa margin-top prvog deteta. Slično, donji margin roditelja može se spojiti sa margin-bottom poslednjeg deteta.

  <div class="parent">
    <p class="child">Dečiji element</p>
  </div>
  

• Kod praznog elementa: Ako element nema sadržaj (height: 0, bez border i padding), njegovi gornji i donji margini mogu se spojiti.

  <div class="empty"></div>
  

Tabela koja ilustruje rezultate spajanja:

Margin 1	Margin 2	Rezultat spajanja
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Spajanje margina dešava se samo u vertikalnom pravcu (margin-top i margin-bottom). Horizontalni margini (margin-left i margin-right) nikada se ne spajaju.

Postoje načini da se spreči spajanje, na primer dodavanjem border, padding, korišćenjem display: flex, display: grid, overflow: hidden ili kreiranjem novog konteksta formatiranja sa display: flow-root.