Dokumentacja CSS z przykładami: Display

Q: Czym różnią się block, inline i inline-block?

Element block zaczyna się w nowej linii i wypełnia dostępną szerokość. Element inline płynie w tekście i ignoruje width, height i pionowe marginesy. inline-block płynie w tekście jak inline, ale przyjmuje szerokość, wysokość, padding i marginesy jak blok.

Q: Czym różni się display: none od visibility: hidden?

display: none usuwa element i jego miejsce. visibility: hidden sprawia, że jest niewidoczny, ale zachowuje jego miejsce w układzie, więc nic się nie przesuwa.

Q: Czy div jest domyślnie blokowy czy liniowy?

Blokowy. div, p, nagłówki, ul, section i form są domyślnie blokowe; span, a, strong, em, img, input i button są liniowe albo inline-block.

Co robi display

Każdy element ma wartość display, która decyduje o tym, jak jest układany. Trzy pierwsze, które poznajesz, to block, inline i inline-block. Oto trzy identyczne pudełka, z tymi samymi width, height, padding i margin, różni je tylko display:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Zaczyna się w nowej linii	Tak	Nie	Nie
Domyślna szerokość	Wypełnia kontener	Dopasowana do treści	Dopasowana do treści
`width` i `height`	Działają	Ignorowane	Działają
Pionowy margines	Działa	Ignorowany	Działa
Pionowy padding	Odpycha treść	Rysowany, ale nie rozsuwa linii	Odpycha treść
Typowe elementy	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (elementy zastępowane zachowują się w ten sposób)

W podglądzie pudełko blokowe stoi w osobnej linii i ma 120px szerokości. Liniowe ignoruje szerokość i wysokość i otacza tylko swoje słowo, a jego pionowy padding i obramowanie wystają nad i pod linię, nie zwiększając jej wysokości. Pudełko inline-block zostaje w linii tekstu, ale zachowuje pełny rozmiar.

display: block

Element blokowy zajmuje całą dostępną szerokość i przenosi to, co po nim następuje, do nowej linii. Zamiana odnośnika w blok to sposób na klikalny cały wiersz:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Szerokość bloku można ustawić, a gdy ją ma, margin: 0 auto go wyśrodkowuje, co pokazuje strona o wyśrodkowaniu diva.

display: inline-block

inline-block to rozwiązanie pośrednie: płynie w linii jak słowo, ale możesz nadać mu rozmiar. Przydaje się do znaczków, przycisków i ikon w tekście:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Kilka pudełek inline-block w rzędzie dostaje między sobą mały odstęp z białych znaków w HTML. Do rzędów pudełek lepiej nadaje się display: flex na rodzicu.

display: none a visibility: hidden

Obie sprawiają, że element jest niewidoczny. Różnica polega na tym, czy zachowuje swoje miejsce:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Zajmuje miejsce	Nie	Tak	Tak
Można go kliknąć	Nie	Nie	Tak
Odczytywany przez czytniki ekranu	Nie	Nie	Tak
Da się płynnie animować	Nie	Nie	Tak

Atrybut HTML hidden działa tak samo jak display: none przez arkusz stylów przeglądarki, co oznacza, że każda reguła CSS ustawiająca display na elemencie (na przykład .card { display: flex; }) go nadpisuje i element znów się pokazuje. Dodaj [hidden] { display: none !important; }, jeśli to ci przeszkadza.

Żeby ukryć coś wizualnie, ale zostawić dla czytników ekranu (na przykład etykietę przycisku z ikoną), użyj klasy "visually hidden" zamiast display: none.

display: flex i display: grid

Te dwie wartości zamieniają element w kontener układu dla jego dzieci:

display: flex układa dzieci w jednym rzędzie albo kolumnie i pozwala sterować wyrównaniem i odstępami. Zobacz flexbox.
display: grid rozmieszcza dzieci jednocześnie w wierszach i kolumnach.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Sam kontener pozostaje blokiem. inline-flex i inline-grid robią to samo z dziećmi, ale sprawiają, że kontener płynie w linii, jak inline-block.

Pozostałe wartości

Wartość	Co robi
`flow-root`	Blok, który obejmuje swoje elementy pływające i nie pozwala marginesom dzieci wyciekać na zewnątrz; nowoczesny "clearfix"
`contents`	Własne pudełko elementu znika, a jego dzieci działają jak dzieci jego rodzica. Unikaj na przyciskach, listach i tabelach: niektóre przeglądarki gubią wtedy znaczenie elementu dla czytników ekranu
`list-item`	Blok ze znacznikiem listy, domyślny dla `li`
`table`, `table-row`, `table-cell`	Układ tabeli na elementach, które nie są tabelą
`inline-flex`, `inline-grid`	Kontener flex albo grid, który stoi w linii

Częste błędy

Ustawianie width albo height na span lub a. Elementy liniowe je ignorują. Użyj inline-block albo block.
Pionowy margines na elemencie liniowym. Też jest ignorowany. Rozwiązanie to samo.
Używanie display: none do ukrycia tekstu przeznaczonego dla czytników ekranu. Ukrywa go również przed nimi.
Oczekiwanie, że dziecko pokaże się w rodzicu z display: none. Nic w ukrytym rodzicu się nie renderuje.
Reguła display nadpisująca atrybut hidden. Wygrywa reguła CSS.
Próba animowania display. Ustawienie display: none ukrywa element od razu, bez przenikania; animuj opacity i przełącz display (albo visibility) na końcu.

Najczęściej zadawane pytania

Czym różnią się block, inline i inline-block?

Element block zaczyna się w nowej linii i wypełnia dostępną szerokość. Element inline płynie w tekście i ignoruje width, height i pionowe marginesy. inline-block płynie w tekście jak inline, ale przyjmuje szerokość, wysokość, padding i marginesy jak blok.

Co robi display: none?

Całkowicie usuwa element ze strony: nie zajmuje miejsca, nie jest renderowany i jest ukryty przed czytnikami ekranu. Jego dzieci są ukryte razem z nim i nie da się ich pokazać ich własną wartością display.

Czym różni się display: none od visibility: hidden?

display: none usuwa element i jego miejsce. visibility: hidden sprawia, że jest niewidoczny, ale zachowuje jego miejsce w układzie, więc nic się nie przesuwa.

Czy div jest domyślnie blokowy czy liniowy?

Blokowy. div, p, nagłówki, ul, section i form są domyślnie blokowe; span, a, strong, em, img, input i button są liniowe albo inline-block.

Skąd odstęp między elementami inline-block?

Biały znak między znacznikami w HTML jest renderowany jako spacja, tak jak między słowami. Zamiast tego użyj na rodzicu display: flex z gap albo usuń biały znak.

Powiązane zagadnienia