Domyślny sposób wyświetlania elementów w HTML nie jest przypadkowy. Przeglądarka od początku wie, że akapit czy nagłówek zajmują całą dostępną szerokość i zaczynają się w nowej linii, a link czy pojedyncze słowo w tekście płyną razem z pozostałą treścią. Ta różnica wynika właśnie z wartości display, która domyślnie przyjmuje postać block dla elementów strukturalnych i inline dla tych wtopionych w tekst. Wystarczy jednak zmienić display, aby całkowicie odwrócić te zachowania – i to bez ingerencji w sam HTML.

Elementy blokowe i liniowe zachowują się inaczej nie tylko pod względem zawijania wierszy. Blokowy element respektuje wszystkie właściwości modelu pudełkowego: marginesy, padding, szerokość i wysokość. Liniowy element owszem, też je posiada, ale w praktyce pionowe marginesy i padding nie rozpychają linii tekstu – nachodzą na sąsiednie wiersze albo są ignorowane. Dlatego link z dużym paddingiem nie zwiększy odstępu między akapitami, choć wizualnie może wyglądać na większy. Jeśli chcesz zrozumieć, dlaczego tak się dzieje, sięgnij po wyjaśnienie elementów blokowych i liniowych, które rozkłada ten mechanizm na czynniki pierwsze.

Zmiana display na inline dla elementu blokowego sprawia, że przestaje on wymuszać nową linię, ale traci też możliwość ustawiania szerokości i wysokości. Z kolei display: block na linku zamienia go w prostokąt zajmujący całą szerokość rodzica – klikalny obszar się powiększa, ale tekst przestaje płynąć w zdaniu. W praktyce najczęściej używa się display: inline-block, który łączy cechy obu: element układa się w linii, ale zachowuje wymiary i pionowe odstępy. Warto pamiętać, że sama zmiana display nie wystarczy, jeśli element ma zagnieżdżone dzieci – one mogą dziedziczyć lub wymuszać własne reguły.

Świadome operowanie display pozwala budować układy bez tabel i floatów. Nawigacja z linków zmienionych na inline-block, przyciski zachowujące się jak bloki czy tekst, który nagle staje się kontenerem – to wszystko efekty jednej właściwości. Warto testować w narzędziach deweloperskich, bo różnice bywają subtelne, a skutki widoczne dopiero przy dłuższej treści. Zrozumienie tych zależności oszczędza godziny debugowania i pozwala przewidzieć, jak przeglądarka ułoży zawartość, zanim napiszesz pierwszą linię CSS.