Zapadanie zachodzi między elementami, które są w tym samym kontekście formatowania i nie mają między sobą żadnej treści, obramowania ani wypełnienia. Rodzic bez paddingu i borderu również łączy swój margines z marginesem pierwszego lub ostatniego dziecka — dlatego kontener z dzieckiem mającym margines górny potrafi odsunąć się od góry strony mimo braku własnego odstępu. Zapadanie nie działa w elementach, których układ jest elastyczny lub siatkowy, ani w kontekstach, które tworzą własne reguły, na przykład przy przewijaniu wewnątrz kontenera.

Istnieje kilka sprawdzonych sposobów usunięcia tego efektu. Najprostszy to zapisanie elementów w kodzie bez żadnego białego znaku między nimi — wszystkie znaczniki w jednej linii, bez spacji i bez enterów. Działa, ale kod staje się mniej czytelny. Drugi sposób to komentarz HTML wstawiony między elementy, który „przerywa" biały znak, nie tworząc nowego. Trzeci, często najwygodniejszy, polega na ustawieniu font-size: 0 na kontenerze nadrzędnym i przywróceniu właściwego rozmiaru czcionki wewnątrz elementów potomnych. Wtedy spacja ma zerową szerokość i znika.

Skąd dokładnie bierze się ta przerwa? Mechanizm jest prosty: parser HTML zamienia ciągi białych znaków na pojedynczą spację, a następnie wstawia ją do drzewa dokumentu jako węzeł tekstowy. Przy elementach blokowych ten węzeł nie ma znaczenia, bo i tak nie są one ustawiane w linii. Przy inline-block spacja staje się pełnoprawnym znakiem w linii tekstu i zajmuje miejsce. Im większa czcionka w kontenerze, tym większa przerwa — dlatego problem bywa bardziej widoczny na dużych ekranach lub przy większym font-size.

Kolejna pułapka: flex-basis: 100% nie zawsze oznacza pełną szerokość widoczną dla użytkownika. Jeśli element ma margin, border albo padding poza box-sizing, wizualnie wyjdzie poza rodzica i pojawi się poziomy pasek przewijania. Bezpieczniej używać flex-basis: 100% razem z box-sizing: border-box i bez marginesów poziomych. Przy zawijaniu (flex-wrap: wrap) elementy z flex-basis: 100% zajmą cały wiersz, a kolejne przejdą do następnej linii — to przydatne do nagłówków sekcji wewnątrz elastycznego układu.

Problem najłatwiej zaobserwować na prostym przykładzie: dwa elementy o szerokości 50% każdy, ustawione obok siebie, nie mieszczą się w jednej linii. Właśnie przez tę dodatkową spację. Wartość 50% plus 50% daje 100%, ale przeglądarka dokłada jeszcze szerokość białego znaku, więc suma przekracza dostępną przestrzeń i drugi element spada do nowej linii. To typowy błąd, który kosztuje wiele godzin debugowania, jeśli nie wie się, skąd bierze się przerwa.

Kiedy projektujesz stronę, pierwszy rzut oka na makietę na dużym ekranie jest naturalny. Wszystko wygląda przestronnie, mieści się w jednej linii, a odstępy wydają się optymalne. Problem pojawia się, gdy ten sam układ otworzysz na telefonie: tekst ucieka, przyciski się nakładają, a menu rozpycha stronę. Dlatego kolejność pracy ma znaczenie. Zamiast zaczynać od szerokiego widoku i go zwężać, zacznij od wąskiego i rozszerzaj. To nie kwestia upodobań, lecz sposobu myślenia o CSS.

Kaskadowość arkuszy stylów działa na zasadzie prostej umowy: gdy dwie reguły dotyczą tego samego elementu i mają taką samą wagę, wygrywa ta zapisana później. Dlatego przeniesienie bloku kodu w pliku potrafi zmienić wygląd strony bez ruszania ani jednej wartości. Warto o tym pamiętać w chwili, gdy poprawka nie działa, choć wydaje się poprawna. Zanim zaczniesz podejrzewać przeglądarkę, sprawdź, czy ktoś niżej nie nadpisał tego samego selektora.

Białe znaki między elementami inline-block to jeden z tych problemów, które potrafią zepsuć precyzyjnie zaplanowany układ strony. Dzieje się tak, ponieważ przeglądarki traktują każdy znak nowej linii, tabulacji czy spacji w kodzie HTML jako zwykłą spację. Gdy elementy mają ustawione display: inline-block, zachowują się jak wyrazy w zdaniu — a przecież między wyrazami zawsze jest odstęp. Efekt? Niewielka, kilkupikselowa przerwa, która potrafi rozsypać siatkę kolumn albo wypchnąć ostatni element poza kontener.

Najczęstszy błąd to walka z liczbami bez zrozumienia, która wartość wygrywa. Zamiast zmniejszać marginesy na oślep, ustal jeden rytm pionowy strony i trzymaj się go konsekwentnie. Gdy wiesz, że przerwa między blokami wynosi zawsze tyle samo, przestajesz dodawać odstępy „na wszelki wypadek". Drugi typowy błąd to dodawanie pustych elementów odstępujących. Taki element sam wprowadza kolejne zapadanie i zwykle nic nie wnosi. Trzeci: stosowanie marginesów na elementach liniowych, które układają się w wiersz — tam odstępy liczą się inaczej.

Praktyczna wskazówka: zanim napiszesz pierwszą linię CSS, otwórz projekt w wąskim oknie i sprawdź, czy wszystko da się przeczytać i kliknąć bez powiększania. Dopiero potem przechodź do szerszych widoków. Używaj jednostek względnych, takich jak rem, procenty i fr w gridzie, zamiast sztywnych pikseli. Pamiętaj o kolejności w arkuszu: style bazowe na górze, media queries z min-width poniżej. Dzięki temu łatwiej przewidzieć, co nadpisze co. Na koniec sprawdź, czy na najszerszym ekranie treść nie rozciąga się na całą szerokość bez ograniczenia — dodaj max-width na kontenerze i wyśrodkuj go marginesami automatycznymi.