Kas yra kraštinių susiliejimas CSS?

Sluoksnių susiliejimas (margin collapsing) yra reiškinys CSS, kai du ar daugiau šalia esančių blokų vertikalūs kraštai susilieja į vieną kraštą. Šio bendro krašto dydis nustatomas pagal didžiausią susiliejusių kraštų reikšmę.

Pagrindinės susiliejimo taisyklės:

• Susiliejimas taikomas tik vertikaliems kraštams (margin-top ir margin-bottom). Horizontalūs kraštai nesusilieja.
• Susiliejimas vyksta tik tarp gretimų elementų kraštų, jei tarp jų nėra kitų elementų, užpildo (padding), kraštų (border) ar bloko turinio.
• Pirmojo vaiko viršutinis kraštas susilies su jo tėvo viršutiniu kraštu, jei tarp jų nėra padding, border ar kitokio turinio.
• Paskutinio vaiko apatinis kraštas susilies su jo tėvo apatine kraštu, jei tarp jų nėra padding, border ar kitokio turinio.
• Tuščio elemento viršutiniai ir apatiniai kraštai gali susilieti tarpusavyje, jei nėra padding, border ar turinio.
• Jei viena iš susiliejusių kraštų yra neigiama, galutinis dydis lygus teigiamų ir neigiamų reikšmių sumai (arba absoliutinei reikšmei, jei abi yra neigiamos ir bendra reikšmė mažesnė už nulį).

Pavyzdys:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Šiuo atveju vertikalus atstumas tarp box1 ir box2 bus 30px (didžiausias iš 20px ir 30px), o ne 50px.

Būdai išvengti susiliejimo:

• Pridėti padding arba border tarp elementų.
• Sukurti naują formatavimo bloką (pvz., su overflow: hidden, display: flow-root arba plaukiojančiais elementais).
• Naudoti display: inline-block, display: flex arba display: grid elementams.
• Naudoti absoliutų pozicionavimą.