Załamywanie marginesów
Jak zachowują się marginesy sąsiadujących ze sobą elementów?
W przypadku sąsiadowania ze sobą lub zagnieżdżania wewnątrz siebie elementów posiadających marginesy, może zajść proces załamywania marginesów zewnętrznych (ang. collapsing margins), polegający na połączeniu kilku sąsiadujących odstępów w jeden o rozmiarze pojedynczego marginesu, a nie sumy składowych. Według CSS 2.1 załamywane mogą być tylko marginesy pionowe w następujących przypadkach:
- Dwa lub więcej sąsiadujące marginesy pionowe bloków bez "oblewania" (float) zostają załamane. Wynikowy margines ma wysokość najwyższego z załamywanych marginesów składowych i jest on zawsze dodatni lub równy zero, nawet w przypadku ujemnych wartości marginesów składowych.
- Pionowe marginesy pomiędzy elementami z ustawionym "oblewaniem" (float) a dowolnymi innymi elementami nigdy nie są załamywane.
- Pionowe marginesy elementów z przepełnieniem (overflow) innym od visible nie są załamywane z ich dziećmi.
- Marginesy elementów pozycjonowanych absolutnie (wg CSS 2 również relatywnie) nie są załamywane.
- Marginesy elementów inline-block nie są załamywane.
- Jeżeli marginesy - górny i dolny - sąsiadujących elementów zostaną załamane, pozycja elementu jest wyznaczana w następujący sposób:
- Jeśli marginesy elementu zostały załamane z górnym marginesem rodzica, górna krawędź obramowania jest taka sama jak dla rodzica.
- Jeśli rodzic nie bierze udziału w załamywaniu marginesów lub tylko dolny margines jest załamywany, pozycja górnej krawędzi obramowania elementu jest taka sama, jakby element miał niezerowe górne obramowanie.
Należy zauważyć, że załamywanie marginesów wpływa tylko na pozycję potomków, a nie wpływa na ustawienie przodka. - Marginesy elementu podstawowego ("root") - czyli nadrzędnego dla wszystkich - nie są załamywane.
Trzeba wyraźnie rozróżnić, że proces załamywania dotyczy tylko i włącznie pionowych marginesów zewnętrznych, a nie wewnętrznych (padding).
Przykład
Po wpisaniu następującego kodu:<div style="margin-bottom: 20px">1</div> <div style="margin-top: 50px">2</div>na ekranie zobaczymy dwa bloki, pomiędzy którymi margines będzie wynosił 50px, a nie 70px (nie suma).