Każdy element HTML ma domyślnie przypisany typ wyświetlania, który decyduje o tym, jak zachowuje się on w przepływie dokumentu. Wartość display: block sprawia, że element zajmuje całą dostępną szerokość i zaczyna się od nowej linii. Dlatego akapit, nagłówek czy div zawsze lądują jeden pod drugim, nawet jeśli w kodzie są obok siebie. Z kolei display: inline pozwala elementowi płynąć w linii razem z tekstem – link, span czy em nie wymuszają przejścia do nowej linii i zajmują tylko tyle miejsca, ile wynosi ich zawartość. Ta różnica jest fundamentalna, bo bez niej nie da się zrozumieć, dlaczego układ strony wygląda tak, a nie inaczej.

W praktyce warto pamiętać, że elementy liniowe nie przyjmują niektórych właściwości box modelu w taki sam sposób jak blokowe. Ustawienie width czy height na inline często nie działa, a pionowe marginesy nie rozsuwają linii. Aby temu zaradzić, stosuje się display: inline-block, który łączy płynięcie w linii z możliwością nadawania wymiarów. Jeśli chcesz lepiej zrozumieć te zależności, przydatne bywają wskazówki o tym, jak elementy blokowe i liniowe wpływają na codzienne decyzje projektowe. Dzięki temu unikniesz typowych błędów, takich jak próba wyśrodkowania linku za pomocą margin: auto, co przy display: inline po prostu nie zadziała.

Zmiana typu wyświetlania to jedno z najprostszych narzędzi do naprawy układu. Gdy menu zbudowane z listy <li> nie chce ustawić się w poziomie, wystarczy nadać tym elementom display: inline-block albo zastosować flexbox na rodzicu. Z drugiej strony, jeśli chcesz, aby jakiś fragment tekstu zachowywał się jak blok – na przykład aby uzyskać kontrolę nad jego szerokością – zmieniasz jego display na block. Warto też wiedzieć, że domyślne style przeglądarki różnią się w zależności od znacznika: <p> jest blokowy, <a> liniowy, a <img> mimo że liniowy, zachowuje się trochę jak inline-block. Świadome operowanie tymi wartościami pozwala precyzyjnie sterować tekstem i całym layoutem.

Podsumowując, display: block i display: inline to nie tylko teoretyczne pojęcia, ale narzędzia, które każdego dnia wpływają na to, jak wygląda strona. Zrozumienie ich działania oszczędza czas na debugowaniu i pozwala pisać czystszy CSS. Warto eksperymentować z różnymi wartościami i obserwować efekty w narzędziach deweloperskich, bo najlepiej uczy się przez praktykę.