Block, inline i inline-block

Właściwość display jest jedną z najważniejszych właściwości CSS. Określa sposób uczestnictwa elementu w przepływie układu — decyduje, czy tworzy on pudełko blokowe, pudełko liniowe czy coś pośredniego.

Elementy blokowe zaczynają się w nowym wierszu i rozciągają się na całą szerokość kontenera. Można ustawić ich width, height, margin i padding ze wszystkich stron.

Domyślne elementy blokowe: div, p, h1-h6, section, article.

Elementy liniowe układają się wewnątrz tekstu. Nie zaczynają nowego wiersza. Ustawienie width lub height nie przynosi efektu. Górny i dolny margin są ignorowane, natomiast poziome marginy i padding działają.

Domyślne elementy liniowe: span, a, strong, em, img.

display: inline-block to rozwiązanie hybrydowe. Elementy układają się liniowo, bez wymuszonego łamania wiersza, ale obsługują width, height oraz wszystkie właściwości modelu pudełkowego, tak jak elementy blokowe.

Przed pojawieniem się Flexboxa wartość inline-block służyła do tworzenia poziomych pasków nawigacyjnych. Wadą tego rozwiązania są małe odstępy między elementami powstające przez białe znaki w kodzie źródłowym HTML.

Odstęp między elementami inline-block można usunąć, ustawiając font-size: 0 na elemencie nadrzędnym i przywracając tę wartość elementom potomnym albo usuwając białe znaki z kodu HTML.

We współczesnym CSS preferowanym sposobem tworzenia poziomych układów bez problemów z białymi znakami jest ustawienie display: flex na elemencie nadrzędnym. inline-block nadal przydaje się do określania rozmiaru pojedynczych elementów.

Typ display dowolnego elementu można zmienić za pomocą CSS. Często wykorzystuje się to do nadania linkom kształtu przycisków albo do ułożenia elementów listy w poziomie.

CSS udostępnia wartości display: table, display: table-row, display: table-cell itd., aby zastosować układ tabeli do elementów, które nie są tabelami. Obecnie używa się ich rzadko, ale nadal mogą przydać się do wyśrodkowywania w pionie w starszych kontekstach.

display: flow-root tworzy nowy kontekst formatowania blokowego bez efektów ubocznych właściwości overflow: hidden. Czyści floaty i zapobiega wydostawaniu się efektu łączenia marginów poza kontener.

Gdy elementy blokowe i liniowe występują jako rodzeństwo, przeglądarka umieszcza osieroconą treść liniową w anonimowych pudełkach blokowych. To niewidoczne działanie wyjaśnia jednak nieoczekiwane przesunięcia w układzie.

Elementy blokowe zajmują całą szerokość i zaczynają się w nowym wierszu. Elementy liniowe układają się razem z tekstem i ignorują width/height. Inline-block łączy obie cechy: układa się liniowo, ale akceptuje width i height. We współczesnych układach zamiast siatek inline-block preferuje się Flexbox i Grid.