4 zasady zapadania marginesów pionowych, które warto znać
Dwa sąsiadujące akapity mają po 20 pikseli marginesu. Oczekujesz 40 pikseli odstępu, a widzisz 20. To nie błąd przeglądarki ani twojego kodu. Tak działa zapadanie marginesów pionowych: przylegające marginesy pionowe nie sumują się, tylko nachodzą na siebie, a wynikiem jest wartość większa z dwóch. Dla 20 i 30 pikseli odstęp wyniesie 30, nie 50.<br>
<br>
<br>
<br>
Podobnie dzieje się na dole: margines ostatniego dziecka może wyjść poza rodzica, gdy ten nie ma dolnego obramowania, wypełnienia ani niczego po dziecku. Jeśli zależy na trzymaniu odstępu wewnątrz, stosuje się te same techniki. Warto pamiętać, że elementy pływające oraz pozycjonowane absolutnie nie biorą udziału w zapadaniu — ich marginesy zachowują się inaczej niż w zwykłym przepływie.<br>
<br>
<br>
<br>
Zaczynaj od selektora znacznika, gdy chcesz ustawić ogólne reguły dla całego dokumentu. Sięgaj po klasę, gdy element ma się powtarzać albo gdy chcesz łączyć kilka niezależnych cech. Zostaw identyfikator do wskazania jednego, niepowtarzalnego miejsca. Trzymanie się tego podziału sprawia, że arkusz stylów rośnie wolniej, a zmiany nie ciągną za sobą lawiny poprawek.<br>
<br>
<br>
<br>
Efekt takiego podejścia to mniej kodu, mniej poprawek i strona, która działa wszędzie od samego początku. Nie musisz zgadywać, co się zepsuje na telefonie, bo telefon jest punktem wyjścia. Wystarczy konsekwentnie trzymać się zasady: najpierw wąsko, potem szeroko, a nie odwrotnie.<br>
<br>
<br>
<br>
Mechanizm dotyczy wyłącznie marginesów pionowych i tylko wtedy, gdy elementy stykają się bez przeszkód: bez obramowania, bez wypełnienia i bez treści między nimi. Marginesy poziome nigdy się nie zapadają — dwa akapity obok siebie zachowają pełne odstępy. W praktyce liczy się kilka typowych sytuacji: margines dolny jednego bloku i górny następnego, margines rodzica i jego pierwszego lub ostatniego dziecka, a także pusty blok, którego własne marginesy górny i dolny również się zlewają.<br>
<br>
<br>
<br>
Jak przewidzieć wynik i gdzie to boli Przy dwóch marginesach dodatnich wygrywa większy. Przy liczbach ujemnych wygrywa ten o większej wartości bezwzględnej, czyli bardziej „wciąga" element. Gdy jeden margines jest dodatni, a drugi ujemny, wartości się dodają: 30 pikseli i minus 10 pikseli daje 20 pikseli odstępu. Zasada jest jedna, ale konsekwencje zależą od kontekstu — dlatego warto sprawdzać układ w narzędziach deweloperskich, zamiast zgadywać z arkusza stylów.<br>
<br>
<br>
<br>
Jak procenty współpracują z gap i paddingi<br>
<br>
<br>
<br>
Pierwszy krok to styl bazowy dla wąskiego ekranu. W praktyce oznacza to, że cały CSS piszesz bez żadnych zapytań o szerokość. Ustawiasz pojedynczą kolumnę, elementy jeden pod drugim, czcionkę czytelną na małym ekranie, przyciski na całą szerokość, obrazy na 100% kontenera. Taki zapis jest domyślny dla wszystkich urządzeń. Telefon nie potrzebuje wtedy żadnych specjalnych reguł, bo bazowo dostaje to, co przygotowałeś. To najważniejsza zasada: najpierw telefon, potem reszta.<br>
<br>
<br>
<br>
Dwa sąsiadujące akapity z odstępem dolnym i górnym nie sumują tych odstępów. Przeglądarka bierze większy z nich i to on wyznacza odległość między blokami. Zjawisko nazywa się zapadaniem marginesów pionowych i dotyczy wyłącznie marginesów w pionie. Marginesy poziome zawsze się dodają, więc odstęp z lewej i z prawej strony elementu sumuje się normalnie.<br>
<br>
<br>
<br>
Min-width zamiast max-width, czyli jak rozszerzać układ Gdy baza jest gotowa, dodajesz reguły dla szerszych ekranów. Zamiast pisać max-width i cofać wcześniejsze ustawienia, używasz min-width. Przykładowo: @media (min-width: 768px) { ... }. W środku zmieniasz tylko to, co ma się zmienić: kontener z jedną kolumną staje się dwukolumnowy, menu poziome, marginesy większe. Reszta zostaje taka sama. Dzięki temu nie musisz nadpisywać wszystkich właściwości po kolei. Kolejne progi szerokości dodajesz stopniowo, np. 480px, 768px, 1024px, 1280px, ale tylko wtedy, gdy układ naprawdę tego wymaga.<br>
<br>
<br>
<br>
W nowoczesnych układach problem często znika sam, gdy używasz właściwości odstępu między elementami zamiast marginesów. Jeśli pracujesz na marginesach, ustal jedną wartość i stosuj ją tylko po jednej stronie bloku — na przykład wyłącznie na dole. Wtedy zapadanie przestaje być pułapką, a staje się matematyką, którą łatwo przewidzieć przed napisaniem pierwszej linii stylu.<br>
<br>
<br>
<br>
Gdy układ przestaje być przewidywalny, sprawdź w narzędziach deweloperskich, który margines faktycznie wygrywa. Podświetlenie elementu pokazuje, gdzie kończy się jeden blok, a zaczyna drugi, i od razu widać, czy odstęp pochodzi z marginesu, czy z wypełnienia. W nowoczesnych układach opartych na flexboxie i gridzie zapadanie nie występuje między elementami potomnymi — tam odstępy ustawia się przez gap, co bywa prostsze i mniej zaskakujące. Jeśli więc projekt na to pozwala, rozważ rezygnację z marginesów pionowych na rzecz jednolitego odstępu w kontenerze.