Display, elementy blokowe, liniowe i przepływ dokumentu

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, do czego służy właściwość display,
• odróżnić elementy blokowe od liniowych,
• użyć inline-block, gdy element ma zostać w linii, ale potrzebuje rozmiaru i paddingu,
• opisać normalny przepływ dokumentu przed wejściem w Flexbox i Grid,
• przewidzieć, jak display wpływa na szerokość, wysokość, marginesy i padding.

Czym jest display?

display to właściwość CSS, która mówi przeglądarce, jak element ma uczestniczyć w układzie strony. Nie zmienia samej treści HTML, ale wpływa na to, czy element zaczyna się od nowej linii, czy może stać obok innych elementów i jak reaguje na rozmiary.

.example {
  display: block;
}

Przeglądarki mają domyślne wartości display dla wielu znaczników. Dlatego <p> zachowuje się inaczej niż <span>, nawet jeśli nie napiszesz żadnego CSS.

Elementy blokowe

Element blokowy zwykle zaczyna się od nowej linii i domyślnie zajmuje całą dostępną szerokość rodzica. To zachowanie dobrze pasuje do większych części strony: sekcji, akapitów, artykułów i kontenerów.

Typowe elementy blokowe to między innymi <div>, <section>, <article>, <p> oraz nagłówki takie jak <h1>.

.panel {
  display: block;
  width: 100%;
  padding: 1rem;
}

Na elemencie blokowym możesz przewidywalnie ustawiać width, height, margin i padding.

Elementy liniowe

Element liniowy nie zaczyna nowego wiersza. Układa się w tej samej linii co tekst i zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość. Dzięki temu linki, wyróżnienia i małe fragmenty tekstu mogą być częścią akapitu.

Typowe elementy liniowe to <span>, <a>, <strong> i <em>.

.highlight {
  display: inline;
  padding-inline: 0.25rem;
  color: #1d4ed8;
}

Element liniowy dobrze nadaje się do stylowania fragmentu tekstu, ale nie jest dobrym wyborem dla pełnej karty, panelu ani większego przycisku.

inline-block w praktyce

inline-block jest opcją pośrednią. Element nadal może stać w jednej linii z innymi elementami, ale zaczyna zachowywać się bardziej jak małe pudełko: reaguje na szerokość, wysokość, padding i marginesy w bardziej przewidywalny sposób.

.tag {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border: 1px solid #dbe2f1;
  border-radius: 999px;
}

To praktyczny wybór dla małych etykiet, badge'y, prostych linków wyglądających jak przyciski albo elementów, które mają wyglądać jak kapsułki w tekście.

Normalny przepływ dokumentu

Normalny przepływ dokumentu to domyślna kolejność układania elementów na stronie. Przeglądarka czyta HTML od góry do dołu i układa elementy zgodnie z ich typem: bloki jeden pod drugim, a elementy liniowe w obrębie bieżącej linii tekstu.

To zachowanie działa zanim użyjesz mocniejszych narzędzi layoutu, takich jak Flexbox i Grid. Te techniki pojawią się później, ale najpierw warto rozumieć punkt startowy przeglądarki.

<h1>Tytuł lekcji</h1>
<p>Akapit zaczyna się pod nagłówkiem.</p>
<p>Link <a href="#">zostaje w linii tekstu</a>.</p>

Jak display wpływa na rozmiary i odstępy

Ta sama deklaracja może działać inaczej w zależności od wartości display. Dlatego po lekcji o box modelu warto połączyć dwie perspektywy: z czego składa się pudełko i jak to pudełko zachowuje się obok innych pudełek.

• block domyślnie rozciąga się na szerokość rodzica i dobrze przyjmuje rozmiary oraz marginesy.
• inline płynie z tekstem, więc width i height nie działają na nim tak jak na bloku.
• inline-block zostaje w linii, ale pozwala wygodniej kontrolować rozmiar i odstępy.

Poniższy przykład pokazuje trzy zachowania obok siebie.

Kopiuj<p>
  <span class="sample sample--inline">inline</span>
  <span class="sample sample--inline-block">inline-block</span>
</p>
<div class="sample sample--block">block</div>

.sample {
  padding: 0.5rem 0.75rem;
  border: 1px solid #3b82f6;
  background-color: #eff6ff;
}

.sample--inline {
  display: inline;
  width: 12rem;
}

.sample--inline-block {
  display: inline-block;
  width: 12rem;
}

.sample--block {
  display: block;
  width: 12rem;
  margin-top: 1rem;
}

Zwróć uwagę, że inline nie zachowuje się jak pełny prostokątny komponent. inline-block i block dają większą kontrolę nad szerokością.

Najczęstsze błędy początkujących

• Próba ustawienia width lub height na elemencie liniowym i oczekiwanie efektu jak na bloku.
• Dodawanie dużego paddingu do linku inline, który potem wygląda nierówno w tekście.
• Używanie div do wszystkiego zamiast dobierania semantycznych elementów HTML.
• Wymuszanie display bez zrozumienia, jakie zachowanie element ma domyślnie.
• Mylenie problemów box modelu z problemami przepływu dokumentu.

Dobre praktyki

• Najpierw sprawdź, czy element ma być częścią tekstu, czy samodzielnym blokiem układu.
• Dla większych sekcji, kart i kontenerów wybieraj zachowanie blokowe.
• Dla krótkich fragmentów w akapicie zostaw zachowanie liniowe.
• Dla małych etykiet i linków wyglądających jak przyciski często używaj inline-block.
• Flexbox i Grid traktuj jako kolejny krok, a nie rozwiązanie każdego drobnego problemu z tekstem.

Mini zadanie

Utwórz prosty fragment HTML z akapitem, linkiem, znacznikiem span i elementem div. Następnie w CSS:

• ustaw podobny padding i border na wszystkich trzech elementach testowych,
• porównaj zachowanie display: inline, display: inline-block i display: block,
• dodaj width i sprawdź, które elementy reagują zgodnie z oczekiwaniem,
• dodaj margin-top i zobacz, gdzie odstęp jest łatwy do przewidzenia,
• zapisz jednym zdaniem, kiedy użyłbyś każdej z trzech wartości.

Najważniejsza obserwacja: nie każdy element powinien zachowywać się jak karta lub sekcja. Czasem ma być tylko fragmentem bieżącego tekstu.

Podsumowanie lekcji

Wiesz już, że display kontroluje podstawowe zachowanie elementu w układzie strony. Elementy blokowe zwykle zajmują cały wiersz, elementy liniowe płyną razem z tekstem, a inline-block daje praktyczny kompromis między nimi.

Rozumiesz także normalny przepływ dokumentu: domyślny sposób układania treści, który warto znać zanim przejdziesz do Flexboxa, Grida i bardziej złożonych layoutów.

Kolejny krok: dodaj pierwszą warstwę stylu wizualnego, czyli świadome kolory, tła i czytelny kontrast.