Jeden odstęp czy dwa? Kiedy marginesy pionowe się łączą

Zupełnie inaczej podchodzi się do problemu, gdy elementy mają układ oparty na flexboxie lub gridzie. W tych modelach białe znaki między elementami nie generują odstępu, bo elementy nie są już układane jak znaki w wierszu tekstu. To najczystsze rozwiązanie, jeśli nie musisz wspierać bardzo starych przeglądarek. Wystarczy ustawić na kontenerze display: flex i zadbać o gap albo marginesy, a odstępy staną się w pełni kontrolowane.

Podsumowując: flex-basis nadpisuje width, gdy obie są ustawione i element jest flexem. Wartość auto w flex-basis sprawia, że width jest brany pod uwagę. Pamiętaj o osi głównej i właściwościach min/max. Świadome używanie tych mechanizmów pozwoli uniknąć walki z układem i niepotrzebnych poprawek.

Warto pamiętać, że flex-basis działa tylko na głównej osi. Dla flex-direction: row będzie to szerokość, a dla column — wysokość. Wtedy width (lub height) może być ignorowany w zależności od osi. Jeśli ustawisz flex-direction: column i podasz width, to width nadal będzie działać jako rozmiar w poprzek osi, ale flex-basis będzie kontrolować wysokość. To rozróżnienie jest kluczowe w praktyce.

Kiedy section wchodzi w article, a kiedy article w section Układ article wewnątrz section sprawdza się, gdy section grupuje wiele niezależnych materiałów. Przykład: section „Aktualności" zawiera trzy osobne artykuły, każdy z własnym tytułem, datą i autorem. Odwrotny układ — section wewnątrz article — stosujesz, gdy jeden tekst dzieli się na logiczne części. Długi poradnik może mieć wewnątrz artykuły sekcje „Przygotowanie", „Wdrożenie" i „Najczęstsze problemy". Każda z nich dostaje własny nagłówek h2, a całość pozostaje jednym artykułem.

W praktyce rozpoznasz to po zachowaniu marginesów i wysokości. Blok przyjmuje pole szerokości, wysokości i marginesy pionowe, które realnie odsuwają sąsiednie elementy. Element liniowy ignoruje pionowe marginesy i wysokość — nie przesunie tekstu w górę ani w dół, choć przyjmie odstępy poziome. Dlatego akapit z marginesem dolnym tworzy przerwę między sobą a następnym akapitem, a link z takim samym marginesem dolnym nie zrobi nic.

Rozwiązania są trzy. Pierwsze: dodaj padding lub obramowanie do rodzica. Drugie: ustaw overflow: hidden albo display: flow-root na kontenerze. Trzecie: zrezygnuj z marginesów na rzecz odstępów między elementami, na przykład gap w kontenerze z display: flex lub grid. Ostatnia metoda jest najprzewidywalniejsza, bo eliminuje zapadanie u źródła.

Mechanizm jest prosty: jeśli akapit ma margines dolny 20 pikseli, a następny margines górny 32 piksele, odległość między nimi wyniesie 32 piksele, nie 52. Gdy wartości są równe, odstęp pozostaje taki sam. Marginesy ujemne też biorą udział w tym rozrachunku — wtedy odejmuje się je od siebie, a wynikiem jest największa wartość dodatnia lub najbardziej ujemna, zależnie od znaków.

Drugi typowy problem to zagnieżdżanie bloku w elemencie liniowym. Przeglądarka to naprawi, ale zrobi to po swojemu i struktura się rozjedzie. Jeśli w linku umieszczasz akapit albo listę, zamień link na element blokowy. I odwrotnie: nie wkładaj elementu blokowego do środka zdania, bo przerwie linię w miejscu, którego się nie spodziewasz. Zasada jest prosta — blok zawiera bloki albo tekst, element liniowy zawiera tylko tekst i inne elementy liniowe.

Warto też wiedzieć, że część elementów ma domyślny display narzucony przez przeglądarkę i można go zmienić, ale nie zawsze wypada. Nagłówki, akapity, listy i sekcje są blokowe z założenia. Linki, pogrubienia, kursywa i fragmenty kodu są liniowe. Zmiana tego domyślnego zachowania bywa sensowna przy budowie menu albo przycisków, ale w zwykłym tekście rzadko prowadzi do czegoś dobrego. Zanim ją wprowadzisz, sprawdź, czy problemu nie da się rozwiązać paddingiem, marginesem albo trybem inline-block.

Kaskada to mechanizm, w którym przeglądarka zbiera wszystkie reguły pasujące do danego elementu, a potem rozstrzyga, która z nich ma największą moc. W praktyce najczęściej wygrywa ta, która pojawia się później w źródle — ale tylko wtedy, gdy pozostałe warunki są równe. Jeśli dwie reguły mają identyczną specyficzność i obie pasują do tego samego elementu, późniejsza po prostu nadpisuje wcześniejszą. To nie jest błąd ani widzimisię przeglądarki, tylko celowa zasada, która pozwala nadpisywać style bez zmiany selektorów.

Najczęstszy błąd polega na tym, że ktoś chce powiększyć obszar klikalny linku i nadaje mu display: block. Efekt bywa odwrotny do zamierzonego: link zajmuje całą szerokość i łamie akapit w losowym miejscu. Lepszym rozwiązaniem jest display: inline-block — element nadal płynie w tekście, ale przyjmuje padding i wysokość, nie rozrywając linii. Trzeba tylko pamiętać, że inline-block potrafi dodać niewielki odstęp wynikający z białych znaków w kodzie.