4 zasady zapadania marginesów pionowych, które warto znać

Osobny przypadek to !important. Odwraca on normalną kolejność: deklaracja z tym znacznikiem wygrywa z każdą zwykłą deklaracją, a przy dwóch takich deklaracjach znów decyduje specyficzność i kolejność. Traktuj go jako ostateczność, np. przy nadpisywaniu stylów z zewnętrznej biblioteki, której nie możesz edytować. W codziennej pracy wystarczy świadome projektowanie selektorów: jedna klasa na komponent, krótkie selektory potomków i unikanie mieszania identyfikatorów z klasami w tym samym komponencie.

Specyficzność liczy się w trzech kolumnach, zapisywanych umownie jako liczby rozdzielone przecinkami: identyfikatory, klasy (oraz atrybuty i pseudoklasy), elementy (oraz pseudoelementy). Selektor #menu .link a ma wartość 1,1,1, a selektor nav ul li a tylko 0,0,4. Wyższa pierwsza liczba zawsze wygrywa, nawet jeśli pozostałe są zerowe. Dlatego jeden identyfikator bije dowolną liczbę klas, a jedna klasa bije dowolną liczbę selektorów elementów. Warto pamiętać, że selektor uniwersalny * i kombinatory (spacja, >, +, ~) nie dodają nic do specyficzności.

Jak policzyć specyficzność i nie dać się zaskoczyć Praktyczna metoda jest prosta: rozbij selektor na części i zsumuj wagi. Pseudoklasy takie jak :hover, :focus czy :nth-child() liczą się jak klasy, ale :not(), :is() i :has() same nie mają wagi — liczy się to, co jest w ich wnętrzu. Pseudoelementy ::before i ::after traktuj jak zwykłe elementy. Selektor atrybutu [type="text"] to klasa. Gdy sumy są równe, wygrywa reguła późniejsza w kolejności wystąpienia — dotyczy to zarówno jednego arkusza, jak i wielu plików podłączonych w danej kolejności.

Najczęstszy błąd to liczenie na palcach sumy marginesów i wpisywanie wartości, które i tak się zapadną. Zamiast zgadywać, ustawiaj odstęp tylko z jednej strony — na przykład wyłącznie margines dolny akapitu — i konsekwentnie się tego trzymaj. Drugi typowy problem to mieszanie marginesów z paddingiem w nadziei, że oba się dodadzą. Padding nigdy się nie zapada i zawsze powiększa obszar elementu, więc jego rola jest inna. Trzeci błąd to walka z zapadaniem za pomocą ujemnych marginesów bez zrozumienia, że przy dwóch wartościach ujemnych wynik nadal będzie ujemny.

SVG to zupełnie inna kategoria. Nie opisuje pikseli, tylko kształty: okręgi, ścieżki, kolory, grubości linii. Dzięki temu ten sam plik jest ostry przy każdej skali — od małej ikony w interfejsie po duży wydruk. Idealnie nadaje się do ikon, logotypów z prostą geometrią, wykresów i elementów interfejsu. Ma jednak granice: skomplikowane zdjęcie zapisane jako SVG zamieni się w tysiące ścieżek, plik będzie ciężki, a wynik gorszy niż w JPG. Kolejna pułapka to efekty rastrowe — cienie, rozmycia i gradienty bywają w SVG obsługiwane różnie przez przeglądarki i programy graficzne, więc to, co widzisz w edytorze, nie zawsze wygląda tak samo u odbiorcy.

Uwaga na typowe pułapki. Opakowanie całej strony w article jest błędem, bo strona nie jest pojedynczą treścią. Wrzucanie wszystkich akapitów w osobne sekcje bez nagłówków nic nie daje. Używanie section jako zamiennika diva do stylowania to zaprzepaszczenie sensu semantyki. Zagnieżdżanie article w article ma sens tylko wtedy, gdy wewnętrzna treść faktycznie jest niezależna, na przykład komentarz pod wpisem.

Praktyczna zasada jest prosta. Zdjęcie do publikacji w sieci — JPG z kompresją około osiemdziesięciu procent i szerokością dopasowaną do miejsca wyświetlania. Grafika z przezroczystym tłem, zrzut ekranu z ostrym tekstem, obrazek do dalszej obróbki — PNG. Ikona, piktogram, logo z płaskimi kształtami — SVG, a jeśli potrzebny jest plik rastrowy, eksportuj go z wektora w docelowym rozmiarze, nie skaluj później.

Wybieraj article, gdy dana treść mogłaby zostać wyjęta z kontekstu i nadal być zrozumiała. Klasyczne przypadki to pojedynczy wpis na blogu, opis produktu, komentarz pod tekstem, karta ogłoszenia. Każdy taki blok powinien mieć własny nagłówek, a najlepiej także autora i datę publikacji. Wtedy można go przenieść do innego widoku lub kanału i nic nie traci na znaczeniu.

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.

Nie zapominaj o obrazkach tła w CSS – one nie mają atrybutu alt. Jeśli niosą treść, przenieś je do HTML jako element img z alt. Podobnie z ikonami w przyciskach: jeśli obok jest tekst, alt może być pusty; jeśli nie ma, alt musi opisywać akcję. Dla obrazków w galeriach rozważ dodanie opisu również w atrybucie title, ale nie licz na to, że czytnik go przeczyta – alt jest najważniejszy.