Gdy nagłówki w article i section psują strukturę dokumentu

Na koniec kilka zasad. Zawsze sprawdzaj układ po zmianie kroju pisma i rozmiaru czcionki. Nie polegaj na ujemnych marginesach, jeśli projekt ma być responsywny. Pamiętaj, że białe znaki działają też między elementami inline, nie tylko inline-block. A gdy układ się rozjeżdża, najpierw zajrzyj do HTML — zanim zaczniesz zmieniać CSS.

Odstępy, które znikają po zawinięciu Najczęstszy błąd to ustawianie marginów wyłącznie po jednej stronie elementów. Dopóki wszystko mieści się w jednym rzędzie, wygląda dobrze. Po zawinięciu marginesy sumują się w pionie i poziome, tworząc nierówne przerwy między wierszami. Zamiast marginesów użyj gap na kontenerze, na przykład gap: 16px. Ta właściwość działa niezależnie od tego, ile wierszy powstanie, i nie wymaga obliczania, który element jest pierwszy ani ostatni.

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.

Zapis hsl() bywa niedoceniany, a właśnie on ułatwia pracę z paletami. Pierwsza wartość to odcień na kole barw (0–360), druga to nasycenie w procentach, trzecia to jasność w procentach. Przykład: hsl(217 89% 51%) odpowiada wspomnianemu wcześniej #1a73e8. Zaleta jest praktyczna: chcąc rozjaśnić kolor, zmieniasz tylko trzecią wartość, a odcień pozostaje ten sam. Przy zapisie szesnastkowym musisz przeliczać każdy kanał osobno. Gdy budujesz zestaw przycisków, stanów hover i obramowań, hsl oszczędza sporo czasu.

Zamiast walczyć z białymi znakami, rozważ flexbox albo grid. W kontenerze z display: flex lub display: grid przerwy między elementami nie wynikają z białych znaków, a odstępy ustawiasz świadomie przez gap, margin lub justify-content. To eliminuje problem u źródła i upraszcza kod. Jeśli musisz zostać przy inline-block, wybierz jedną metodę i stosuj ją konsekwentnie w całym projekcie, bo mieszanie sposobów prowadzi do błędów trudnych do wykrycia.

Gdy obok siebie ustawisz kilka elementów z właściwością display: inline-block, między nimi pojawi się niewielka przerwa, której nie zdefiniowałeś w CSS. To nie margines ani padding — to znak białej spacji w kodzie HTML. Przeglądarka traktuje każdy enter, tabulację i spację między znacznikami jako separator tekstu, a elementy inline-block układają się w linii tekstu, więc ten separator zajmuje miejsce i tworzy odstęp o szerokości zwykłej spacji.

Jak usunąć odstęp bez psucia kodu Najprostszy sposób to zapisanie elementów w jednej linii, bez spacji i enterów między znacznikami. Działa, ale kod staje się długi i trudny w utrzymaniu, zwłaszcza gdy elementów jest wiele. Inna metoda to ustawienie na rodzicu font-size: 0, a na dzieciach przywrócenie właściwego rozmiaru czcionki. To skuteczne, lecz trzeba pamiętać o każdym potomku — pominięcie jednego spowoduje, że jego tekst zniknie. Uwaga też na jednostki em i rem zależne od font-size rodzica.

W praktyce wygląda to tak: ustawiasz na kontenerze display: flex, flex-wrap: wrap, a na dzieciach elastyczne szerokości, na przykład flex: 1 1 240px. Wartości w skrócie flex oznaczają odpowiednio: zdolność do rozciągania, zdolność do kurczenia i bazową szerokość. Gdy dostępne miejsce pozwala na trzy kolumny, zobaczysz trzy. Gdy zrobi się węższe, czwarty element spadnie do nowej linii, a pozostałe zachowają sensowną szerokość zamiast zamieniać się w pionowe paski.

Flex-wrap nie działa w próżni. Elementy muszą mieć realną podstawę do zawijania, czyli ograniczoną szerokość minimalną lub maksymalną. Sam flex-wrap: wrap bez zmiany flex-basis albo width nic nie zmieni, bo dzieci domyślnie kurczą się do zera i mieszczą się w jednej linii. Ustaw min-width lub flex-basis na taką wartość, poniżej której element przestaje być użyteczny — to sygnał dla przeglądarki, że czas przejść do nowego rzędu.

Zapis szesnastkowy to najczęstszy format w plikach produkcyjnych. Wygląda tak: #1a73e8, gdzie pierwsze dwie cyfry to czerwony, kolejne dwie zielony, a ostatnie dwie niebieski. Każda para przyjmuje wartości od 00 do ff, czyli od 0 do 255. Można go skrócić do trzech znaków, gdy obie cyfry w każdej parze są takie same — #aabbcc zapiszesz jako #abc. Uwaga na typowy błąd: #abc to nie to samo co #aabbcc w oczach początkującego, ale przeglądarka rozwija skrót dokładnie do #aabbcc. Gorzej, gdy ktoś zapisze #abcd — cztery znaki to format z kanałem alfa, a nie skrót koloru trójskładnikowego.