display: block, inline i inline-block — lekcja z przykładami

Dlaczego width nie działa na span? Dlaczego dwa div zawsze stoją jeden pod drugim? Odpowiedź tkwi we właściwości display, która decyduje, jak element zachowuje się w układzie strony: czy zajmuje całą szerokość i zaczyna nową linię (blok), czy płynie w tekście jak litery (liniowy), czy łączy cechy obu (inline-block). Na lekcji uczniowie mierzą te zachowania na trzech parach elementów.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej model pudełkowy — na przykład po lekcji o modelu pudełkowym.

Przygotowanie stanowisk

Potrzebne są przeglądarka z narzędziami deweloperskimi (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. HTML w obu folderach jest taki sam i jej nie zmieniasz — pracujesz w start/style.css. Po zapisaniu pliku odśwież stronę. Wymiary elementów sprawdzisz w narzędziach deweloperskich (zakładka Elements, panel Computed). Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• wskazać cechy elementów blokowych, liniowych i inline-block;
• wyjaśnić, dlaczego width i height nie działają na elementach liniowych;
• użyć inline-block, gdy elementy mają stać w linii i mieć wymiary;
• odróżnić display: none od visibility: hidden.

Trzy podstawowe tryby

Domyślnie div, p, h1, ul są blokowe, a span, a, strong, em — liniowe. W elemencie liniowym padding w poziomie powiększa pole, ale w pionie nachodzi na sąsiednie linie bez zmiany wysokości linii; width i height nie mają żadnego efektu, a marginesy pionowe są ignorowane. inline-block jest wygodny dla przycisków i etykiet, które mają stać w jednej linii, a mieć określony rozmiar. Odstępy między elementami inline-block pochodzą ze znaków spacji i nowej linii w HTML.

Ukrywanie

display: none całkowicie usuwa element z układu — nie zajmuje miejsca i nie jest dostępny dla czytników ekranu. visibility: hidden ukrywa element, ale zostawia puste miejsce na jego miejscu. W projekcie widać to po położeniu następnego słowa: po elemencie ukrytym przez visibility słowo „po” zaczyna się o szerokość tego elementu dalej niż po elemencie usuniętym przez display: none.

Zadania

Zadanie 1. Bloki. Ustaw display: block dla .blok. Zmierz szerokość obu bloków i sprawdź, że każdy zaczyna się w nowej linii.

Zadanie 2. Liniowy i inline-block. Nadaj .inline display: inline, szerokość 200 px i padding 10 px. Nadaj .inline-block te same wartości, ale z display: inline-block. Zmierz szerokość obu elementów i wyjaśnij różnicę.

Zadanie 3. none i hidden. Ukryj .ukryty-v przez visibility: hidden, a .ukryty-n przez display: none. Porównaj szerokość obu ukrytych elementów oraz położenie słowa „po” w obu akapitach i wyjaśnij.

Dla chętnych: zmień .inline na display: inline-block i sprawdź, co dzieje się z pionowym padding oraz wysokością linii.

Rozwiązanie i wyniki

body {
  margin: 0;
  padding: 16px;
  font-family: sans-serif;
  font-size: 16px;
}
.kontener {
  width: 600px;
}
.blok {
  display: block;
  background: #dbeafe;
  margin-bottom: 8px;
}
.inline {
  display: inline;
  width: 200px;
  padding: 10px;
  background: #fde68a;
}
.inline-block {
  display: inline-block;
  width: 200px;
  padding: 10px;
  background: #bbf7d0;
}
.ukryty-v {
  visibility: hidden;
}
.ukryty-n {
  display: none;
}

Pomiary w przeglądarce: oba bloki mają szerokość 600 px (cały kontener) i leżą jeden pod drugim. Element .inline-block ma szerokość 220 px (200 px + 2 · 10 px paddingu), a element .inline — 58,25 px, czyli szerokość jego tekstu (38,25 px) powiększona o padding po 10 px z każdej strony, a nie 200 px. Element ukryty przez visibility nadal ma szerokość 102,23 px, więc następne słowo „po” zaczyna się w poziomie w punkcie 164,48 px; po display: none element ma szerokość 0 i to samo słowo zaczyna się w punkcie 62,24 px (różnica 102,24 px). Akapity-rodzice mają w obu przypadkach tę samą szerokość 600 px, bo są blokami.

Typowe błędy

Pytania kontrolne i punktacja

1. Które z elementów div, span, p, a są domyślnie blokowe?
2. Dlaczego inline-block bywa lepszy od inline?
3. Czym różni się display: none od visibility: hidden?

Odpowiedzi: div i p. Bo pozwala ustawić szerokość i wysokość, a element nadal płynie w linii. none usuwa element z układu, hidden zostawia puste miejsce.

Proponowana punktacja (razem 10 punktów): zadanie 1 — display: block 1 pkt, pomiar i nowa linia 1 pkt; zadanie 2 — dwie reguły 2 pkt, pomiar i wyjaśnienie 2 pkt; zadanie 3 — dwa sposoby ukrycia 1 pkt, porównanie rodziców i wyjaśnienie 2 pkt; poprawny zapis CSS 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to Flexbox i Grid, które układają elementy w rzędach i siatkach. Ten materiał rozwija dział o układzie strony w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: display w MDN oraz układ blokowy i liniowy. Zobacz też lekcję o modelu pudełkowym.