Block vs. Inline vs. Inline-Block

Die Eigenschaft display gehört zu den grundlegendsten Eigenschaften in CSS. Sie bestimmt, wie ein Element am Layoutfluss teilnimmt — ob es eine Block-Box, eine Inline-Box oder etwas dazwischen erzeugt.

Block-Elemente beginnen in einer neuen Zeile und erstrecken sich über die gesamte Breite ihres Containers. Sie können width, height, margin und padding für alle Seiten festlegen.

Standardmäßige Block-Elemente: div, p, h1-h6, section, article.

Inline-Elemente fließen innerhalb von Text. Sie beginnen keine neue Zeile. Das Festlegen von width oder height hat keine Wirkung. Der obere und untere margin werden ignoriert; horizontale Margins und Padding funktionieren.

Standardmäßige Inline-Elemente: span, a, strong, em, img.

display: inline-block ist eine Kombination aus beidem. Elemente fließen inline (ohne erzwungenen Zeilenumbruch), unterstützen aber width, height und alle Eigenschaften des Box-Modells wie Block-Elemente.

Vor Flexbox wurde inline-block für horizontale Navigationsleisten verwendet. Ein Nachteil: Leerraum im HTML-Quelltext erzeugt kleine Abstände zwischen den Elementen.

Der Leerraum zwischen Inline-Block-Elementen lässt sich entfernen, indem Sie für das übergeordnete Element font-size: 0 festlegen und die Schriftgröße für die untergeordneten Elemente wiederherstellen oder den Leerraum im HTML beseitigen.

In modernem CSS ist display: flex für das übergeordnete Element die bevorzugte Methode, um horizontale Layouts ohne Probleme durch Leerraum zu erstellen. inline-block ist weiterhin nützlich, wenn die Größe eines einzelnen Elements festgelegt werden soll.

Der display-Typ jedes Elements kann mit CSS geändert werden. Dies wird häufig verwendet, um Links wie Schaltflächen darzustellen oder Listenelemente horizontal anzuordnen.

CSS stellt display: table, display: table-row, display: table-cell und weitere Werte bereit, um Nicht-Tabellenelemente mit einem Tabellenlayout darzustellen. Heute wird dies nur selten benötigt, ist aber in älteren Kontexten für die vertikale Zentrierung nützlich.

display: flow-root erzeugt einen neuen Block-Formatierungskontext, ohne die Nebeneffekte von overflow: hidden. Es hebt Floats auf und verhindert, dass der Kollaps von Margins aus einem Container herauswirkt.

Wenn Block- und Inline-Elemente als Geschwisterelemente gemischt werden, fasst der Browser verwaiste Inline-Inhalte in anonymen Block-Boxen zusammen. Dieses Verhalten ist unsichtbar, erklärt aber unerwartete Verschiebungen im Layout.

Welcher display-Wert erlaubt das Festlegen von width, während das Element im Inline-Fluss bleibt?

Block-Elemente nehmen die gesamte Breite ein und beginnen eine neue Zeile. Inline-Elemente fließen mit dem Text und ignorieren width/height. Inline-Block vereint beides: Das Element fließt inline, akzeptiert aber width und height. Für moderne Layouts werden Flexbox und Grid gegenüber Inline-Block-Rastern bevorzugt.