Display

Die CSS-Eigenschaft display legt den Anzeigemodus eines Elements fest. Sie bestimmt, ob es sich im Layout als Block- oder Inline-Element verhält und ob seine Inhalte im normalen Dokumentfluss, mit Flexbox oder Grid angeordnet werden.

Mit der CSS-Eigenschaft display lässt sich das voreingestellte Anzeigeverhalten von HTML-Elementen verändern.

HTML-Elemente

HTML-Elemente besitzen ein voreingestelltes Anzeigeverhalten, entweder Block oder Inline. Dieses Standardverhalten bestimmt, wie sie sich im Layout verhalten – noch bevor CSS eingesetzt wird. Die meisten Elemente sind entweder Block-Elemente oder Inline-Elemente, und können ihr Verhalten mit CSS über die display-Eigenschaft ändern.

Block-Elemente

  • beginnen in einer neuen Zeile
  • nehmen standardmässig die volle verfügbare Breite ein
  • können width, height, margin und padding verwenden

Typische Block-Elemente: <div> | <section> | <p> | <h1>–<h6>

Inline-Elemente

  • bleiben im Textfluss
  • beginnen nicht in einer neuen Zeile
  • ignorieren width und height

Typische Inline-Elemente: <span> | <a> | <strong> | <img>

Display Werte

  • inlineBleibt im Textfluss und ignoriert width und height.
  • blockVerhält sich wie ein Block-Element.
  • inline-blockVerbindet das Verhalten eines Inline-Elements mit der Möglichkeit, width und height wie bei einem Block-Element festzulegen.
  • noneEntfernt das Element vollständig aus dem Layout.
  • contentsDas Element erzeugt keine eigene Box; seine Kindelemente bleiben im Layout erhalten.
  • display: flexAktiviert Flexbox für flexible Anordnung.
  • display: gridAktiviert Grid für zweidimensionale Layouts.

1. display: inline

Der CSS-Wert display: inline definiert ein Element als Inline-Element. Diese Elemente verhalten sich wie einzelne Wörter innerhalb eines fliessenden Textes.

Typische Standard-Elemente: <span>, <a> (Hyperlink) und <strong> (fetter Text).

Zentrale Merkmale

  • Kein Zeilenumbruch: Das Element verbleibt im normalen Textfluss. Mehrere Inline-Elemente werden in derselben Zeile nebeneinander dargestellt.
  • Minimaler Platzbedarf: Die Breite richtet sich ausschliesslich nach dem tatsächlichen Inhalt (z. B. der Textlänge).
  • Keine Grössenvorgaben: Die CSS-Eigenschaften width (Breite) und height (Höhe) zeigen bei reinen Inline-Elementen keine Wirkung.
  • Eingeschränkte Abstände: Horizontale Abstände (links und rechts) funktionieren normal. Vertikale Aussenabstände (margin-top / margin-bottom) verschieben die darüber oder darunter liegenden Textzeilen jedoch nicht.

Beispiel: Listenelemente li als inline

Aus einer vertikalen Liste wird eine horizontale Navigation. Listenelemente ul / ist ein Blockelement, li verwendet standardmässig display: list-item. Die Aufzählungszeichen verschwinden, weil die li-Elemente nicht mehr display: list-item verwenden. Zwischen den Elementen bleibt der White-Space aus dem HTML sichtbar.

  • Kurs
  • Workshop
  • Masterclass
ul.oneline {
    padding: 0;
    margin: 0 0 20px;
    }
ul.oneline li{
    display: inline;
    border: 1px solid salmon;
    padding: 10px;
}

Inline-Elemente unterliegen dem Box Model. Einige Eigenschaften wie margin-top, margin-bottom oder width verhalten sich anders. Details dazu im Kapitel „Box Model“.

2. display: block

Der CSS-Wert display: block zwingt ein HTML-Element dazu, sich als eigenständiger Block im Layout zu verhalten. Diese Elemente bilden das strukturelle Fundament einer Webseite.

Typische Standard-Elemente: <div>, <p> (Textabsatz), <h1> bis <h6> (Überschriften), <header> und <footer>.

Zentrale Merkmale

  • Erzwungener Zeilenumbruch: Ein Block-Element startet ausnahmslos auf einer neuen Zeile. Nachfolgende Inhalte werden automatisch darunter platziert.
  • Maximale Raumausnutzung: Das Element dehnt sich in der Breite automatisch so weit aus, wie es das übergeordnete Element erlaubt (standardmässig 100 %).
  • Flexible Dimensionen: Die Eigenschaften für Breite (width) und Höhe (height) lassen sich exakt definieren.
  • Vollständige Abstände: Innenabstände (padding), Aussenabstände (margin) und Rahmen (border) werden auf allen vier Seiten korrekt berechnet und verschieben das umliegende Layout.

Beispiel: display: block mit :hover

Der Link ist ein inline-Element und wird zu einem Block-Element. Dadurch ist der gesamte Bereich klickbar – ideal für Navigationen.

Intensivstation

a.block{
    display: block;
    border: 1px solid salmon;
    padding: 10px;
}
a.block:hover{
    background: salmon;
}

3. display: inline-block

Der CSS-Wert display: inline-block kombiniert das Verhalten von Inline-Elementen mit den Gestaltungsmöglichkeiten von Block-Elementen. Es verhält sich im Textfluss wie ein Inline-Element, lässt sich im Inneren aber wie ein Block-Element formatieren.

Typische Anwendungen: Buttons, Navigationselemente und kleine Layout-Boxen innerhalb einer Zeile.

Zentrale Merkmale

  • Kein Zeilenumbruch: Das Element verbleibt wie ein Inline-Element im normalen Textfluss und steht neben anderen Elementen in derselben Zeile.
  • Flexible Grössenvorgaben: Im Gegensatz zu reinen Inline-Elementen reagiert es auf die CSS-Eigenschaften width (Breite) und height (Höhe).
  • Volle Abstände: Sowohl horizontale als auch vertikale Innen- und Aussenabstände (margin und padding) funktionieren in alle Richtungen einwandfrei.
  • Layout-Kontrolle: Es ermöglicht das Erstellen von Boxen (z. B. Buttons), die nebeneinander stehen, aber feste Maße und Abstände besitzen.

display: inline-block mit :hover

Zwischen inline-block-Elementen entsteht ein White-Space wie zwischen Wörtern im Text.

Intensivstation Intensivstation

a.i-block{
    display: inline-block;
    border: 1px solid salmon;
    padding: 10px;
}
a.i-block:hover{
    background: salmon;
}

4. display: none

Der CSS-Wert display: none blendet ein Element vollständig aus dem Layout aus. Das Element existiert zwar weiterhin im HTML-Code, wird aber auf der Webseite weder angezeigt noch beansprucht es Platz.

Zentrale Merkmale:

  • Kein Platzbedarf: Das Element verschwindet komplett aus dem sichtbaren Layout. Nachfolgende Elemente rücken nach und füllen die Lücke auf.
  • Keine Interaktion: Ausgeblendete Elemente sind für Nutzer unsichtbar und können nicht geklickt oder fokussiert werden.
  • Barrierefreiheit: Elemente mit diesem Wert werden von Screenreadern (Vorleseprogrammen für Sehbehinderte) standardmässig ignoriert.
  • Dynamische Nutzung: Wird häufig in Kombination mit JavaScript verwendet, um Menüs, Pop-ups oder Tabs dynamisch ein- und auszublenden.

Unterschied zu visibility: hidden: Während display: none den Platz freigibt, lässt visibility: hidden das Element unsichtbar werden, behält dessen Platz im Layout aber bei.

5. display: contents

Der CSS-Wert display: contents entfernt die Box eines Elements aus dem Layout, seine Kindelemente bleiben jedoch erhalten. Die DOM-Struktur bleibt unverändert; im Layout werden die Kindelemente so behandelt, als wären sie direkte Kinder des übergeordneten Elements.

Zentrale Merkmale:

  • Box-Verschwinden: Das Element selbst erzeugt keine visuelle Box. Eigenschaften wie Hintergrundfarben, Rahmen, Breiten oder Abstände (Margin/Padding) des Elements selbst werden ignoriert.
  • Layout-Ebene: Die Kindelemente nehmen direkt am Flex- oder Grid-Layout des übergeordneten Elements teil.
  • Barrierefreiheit: Einige Browser entfernen das Element aus dem Accessibility Tree. Deshalb sollte display: contents nicht auf semantisch wichtigen Elementen verwendet werden.
  • Styling-Ausnahme: Geerbte CSS-Eigenschaften wie color (Textfarbe) oder font-family (Schriftart), die am Element mit display: contents definiert sind, werden weiterhin an die Kindelemente weitergegeben.

Typischer Einsatzzweck: Zusätzliche, nicht semantische Wrapper, die etwa durch ein CMS oder eine Komponente erzeugt werden und ein Flexbox- oder Grid-Layout nicht unterbrechen sollen.

6. display: flex & display: grid

Während die klassischen Display-Werte vor allem das Verhalten einzelner Boxen im Textfluss steuern, eröffnen moderne Layout-Systeme weitreichende Möglichkeiten für komplexe Webdesigns. Sie verwandeln ein Element in ein übergeordnetes Steuersystem für alle darin enthaltenen Kindelemente.

Die zwei mächtigsten Layout-Werkzeuge in CSS

  • Eindimensionale Ausrichtung: Über display: flex erfolgt die flexible Anordnung von Elementen entlang einer einzelnen Achse (Zeile oder Spalte). Dies eignet sich besonders für Navigationsleisten oder kleinere Komponenten.
  • Zweidimensionales Raster: Über display: grid werden Zeilen und Spalten gleichzeitig gesteuert. Dieser Wert ist ideal für das übergeordnete Seitenlayout und komplexe Kachelsysteme.

Kurz gesagt

  • inline bleibt im Textfluss.
  • block erzeugt eine eigene Box über die verfügbare Breite.
  • inline-block verbindet Inline-Verhalten mit width und height.
  • none entfernt das Element aus dem Layout.
  • contents entfernt nur die Box des Elements.
  • flex und grid ordnen die Kindelemente an.

Neben diesen Werten gibt es weitere display-Werte und kombinierte Schreibweisen für spezielle Layout-Aufgaben.