Czym jest znikanie granic w CSS?

Zanikanie marginesów (margin collapsing) to zjawisko w CSS, w którym pionowe marginesy dwóch lub więcej sąsiadujących bloków łączą się w jeden margines. Rozmiar tego wspólnego marginesu jest określany przez największą wartość spośród zanurzających się marginesów.

Główne zasady zanikania:

• Zanikanie dotyczy tylko pionowych marginesów (margin-top i margin-bottom). Marginesy poziome nie zanurzają się.
• Zanikanie dotyczy tylko marginesów sąsiadujących elementów, jeśli między nimi nie ma innych elementów, paddingu (padding), obramowania (border) lub zawartości blokowej.
• Górny margines pierwszego elementu potomnego zanurzy się z górnym marginesem jego rodzica, jeśli między nimi nie ma padding, border lub innej zawartości.
• Dolny margines ostatniego elementu potomnego zanurzy się z dolnym marginesem jego rodzica, jeśli między nimi nie ma padding, border lub innej zawartości.
• Górne i dolne marginesy pustego elementu mogą się zanurzyć między sobą, jeśli nie ma w nim padding, border lub zawartości.
• Jeśli jeden z zanurzających się marginesów jest ujemny, końcowy rozmiar jest sumą wartości dodatnich i ujemnych (lub wartością bezwzględną, jeśli oba są ujemne i suma jest mniejsza od zera).

Przykład:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

W tym przypadku odległość pionowa między box1 a box2 będzie wynosić 30px (największa z wartości 20px i 30px), a nie 50px.

Sposoby zapobiegania zanikania:

• Dodanie padding lub border między elementami.
• Utworzenie nowego bloku formatowania (np. za pomocą overflow: hidden, display: flow-root lub elementów pływających).
• Użycie display: inline-block, display: flex lub display: grid dla elementów.
• Użycie pozycjonowania absolutnego.