Benutzer:MScharwies/Layout-Verhalten mit display

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Verständnis von display ist eine wichtige Grundlage für CSS-Layouts. Die modernen Layouttechniken Flexbox und Grid Layout werden ebenfalls über die CSS-Eigenschaft display aktiviert.

Die CSS-Eigenschaft display bestimmt, wie sich ein Element im Dokumentfluss verhält. Sie legt fest, ob ein Element als Blockelement, Inline-Element oder in einer anderen Darstellungsart angezeigt wird.

block vs. inline – Das klassische Modell

Blockelemente wie Überschriften (h1-h6) oder Absätze (p) nutzen normalerweise die verfügbare Breite ihres Elternelements. Wird der Platz für den Text zu knapp, bricht der Browser ihn automatisch um und stellt ihn in weiteren Zeilen dar.[1]

Inline-Elemente wie em, strong oder span werden dagegen wie Text behandelt, nebeneinander angeordnet und können auch auf eine neue Zeile umgebrochen werden, wenn der horizontale Platz nicht ausreicht. Sie benötigen nur den Platz, den ihr Inhalt benötigt.

Block- und Inline-Elemente im Vergleich ansehen …

display: inline-block

Manchmal kann es notwendig sein, dass sich ein Inline-Element wie eine kleine Box verhalten soll, aber dennoch Teil der Textzeile bleibt.

Badge mit display:inline-block ansehen …
.badge {
  display: inline-block;
  padding: .2em .6em;
  border-radius: .5em;
  background: steelblue;
  color: white;
  rotate: 8deg;
}

Warum inline-block?

Die Badge …

  • bleibt im Textfluss erhalten.
  • kann einen Innenabstand haben.
  • kann einen Hintergrund und einen Rahmen haben.
  • kann transformiert werden

Ein einfaches Inline-Element kann vertikale Innenabstände und Rahmen nicht auf dieselbe vorhersehbare Weise handhaben.

Ein Blick zurück

Ursprünglich hatten Computermonitore im Textmodus nur 80 Zeichen Breite[2]. Erst als größere Monitore mit höheren Bildauflösungen und der Fähigkeit, Grafik darzustellen, auf den Markt kamen, entstand der Wunsch, Blockelemente auch nebeneinander positionieren zu können. Mit display ließen sich Blockelemente zwar grundsätzlich in Inline-Elemente umwandeln und umgekehrt – für echte, flexible Nebeneinander-Layouts reichte das aber noch nicht aus.

Wer komplexere Layouts umsetzen wollte, behalf sich deshalb lange mit Floats oder sogar mit Tabellen – beides eigentlich nicht für diesen Zweck gedacht. Bis etwa 2015 war block/inline praktisch das einzige echte Layout-Modell im Web.

Das änderte sich mit zwei neuen Layout-Modellen: Flexbox wurde ab ca. 2015 von allen gängigen Browsern unterstützt, Grid Layout folgte 2017. Seitdem gehören beide zum festen Werkzeugkasten moderner Webentwicklung – und display musste erweitert werden, um festzulegen, welches der Modelle für die Kind-Elemente eines Containers gelten soll.

Das Doppelmodell: äußeres und inneres display

Seit der CSS Display Module Level 3 Spezifikation[3] beantwortet display genau genommen zwei Fragen gleichzeitig:

  • Äußeres Verhalten (outer display type): Wie verhält sich das Element gegenüber seinen Nachbar-Elementen?
    Block-artig oder Inline-artig?
  • Inneres Verhalten (inner display type): Nach welchem Modell werden die Kind-Elemente dieses Elements angeordnet?
    Im normalen Elementfluss, oder nach einem anderen Modell wie Flexbox oder Grid Layout?

Diese Zweiteilung lässt sich seitdem auch direkt in der Syntax ausdrücken:

Die zwei Bestandteile von display 
display: block flow; /* entspricht display: block */ 
display: inline flow; /* entspricht display: inline */ 
display: block flex; /* ein Flex-Container, der sich selbst wie ein Blockelement verhält */ 
display: inline flex; /* ein Flex-Container, der sich selbst wie ein Inline-Element verhält */ 
display: block grid; 
display: inline grid;

Äußerer Display-Typ

Block oder Inline? Flow oder Flex? ansehen …
.block-flex,
.inline-flex {
  gap: .5em;
  justify-content: space-between;
  border: medium solid steelblue;
  padding: .5em;
}

.block-flex {
  display: block flex;
}

.inline-flex {
  display: inline flex;
}

Die erste Angabe bestimmt, wie sich der Container selbst im Dokumentfluss verhält:
block beginnt in einer eigenen Zeile und nimmt die verfügbare Breite ein, während
inline sich wie ein Textbestandteil in die aktuelle Zeile einfügt.

Die zweite Angabe legt fest, wie die direkten Kindelemente innerhalb dieses Containers angeordnet werden.
Bei flow gilt der normale Dokumentfluss, bei flex werden die Kinder zu Flex-Elementen und bei grid zu Grid-Elementen.

Innerer Display-Typ

flow – der normale Dokumentfluss

Was vielen nicht bewusst ist: Eine HTML-Seite passt sich ohne zusätzliche CSS-Angaben bereits flexibel an unterschiedliche Bildschirmgrößen an.

Der normale Dokumentfluss (engl. flow) beschreibt das Verhalten von Elementen (genauer: von Boxen). Block-Elemente werden untereinander angeordnet und nutzen in der Regel die verfügbare Breite ihres Elternelements. Inline-Elemente bleiben dagegen im Textfluss und werden wie Wörter nebeneinander dargestellt. Reicht der Platz nicht aus, erfolgt ein automatischer Zeilenumbruch.

Die meisten HTML-Elemente verwenden standardmäßig flow. Erst Werte wie flex oder grid ändern die Anordnung der Kindelemente.[4][5]

Elemente mit position: absolute oder position: fixed sowie gefloatete Elemente verlassen den normalen Dokumentfluss ganz oder teilweise und folgen daher anderen Regeln.

Beachte:
Der Begriff Dokumentfluss beschreibt die Anordnung der Elemente auf der Seite.
Der Wert flow bezeichnet den inneren Display-Typ, der genau dieses Standardverhalten verwendet.

flow-root – ein eigener Block-Formatierungskontext

flow-root verwendet den normalen Dokumentfluss wie flow, erzeugt aber zusätzlich einen eigenen Blockformatierungskontext (block formatting context). Dadurch kann ein Element seine Inhalte zuverlässig einschließen – insbesondere Floats, die sonst aus dem normalen Elementfluss herausfallen können.

Früher wurde dafür häufig ein sogenannter Clearfix verwendet. Heute kann diese Aufgabe mit display: flow-root einfacher gelöst werden.

Float mit flow-root ansehen …
.bildtext {
	display: flow-root;
	width: 25em;
	margin-block-end: 1em;
}

.bildtext img {
	float: inline-end;
	margin-inline-start: 1em;
	width: 12.5em;
}

Moderne Layouts mit Flexbox und Grid

Warum inline-block nicht mehr für Layouts verwendet wird

Du hast inline-block bereits kennengelernt. Mit dem Doppelmodell lässt sich sein Verhalten nun genauer beschreiben: Es kombiniert einen äußeren Display-Typ inline mit einem inneren Display-Typ flow-root.

Früher wurde display: inline-block häufig verwendet, um Elemente nebeneinander anzuordnen.
Damit entstanden beispielsweise horizontale Navigationen, mehrspaltige Bereiche oder einfache Raster.

Für diese Aufgaben stehen heute mit Flexbox und Grid Layout leistungsfähigere Layoutsysteme zur Verfügung. Sie ermöglichen eine flexible Ausrichtung, Verteilung und Anpassung von Elementen und sind deshalb die bevorzugten Werkzeuge für moderne Webseiten.

flex und grid – moderne Layout-Systeme

Die Werte flex und grid verändern ebenfalls die Anordnung der Kindelemente. Mit diesen Werten wird das Visual Formatting Model durch flexible und responsive Flexbox-, bzw. Grid Layout-Modelle ersetzt, die die Webseite browserseitig aufteilen. Im Gegensatz zu flow bieten sie eigene Regeln zur Ausrichtung und Verteilung. Aufgrund ihres Umfangs werden sie in eigenen Tutorials behandelt.

Zeitgemäßes Nebeneinander im Grid Layout ansehen …
body { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}

Dieses Beispiel greift den folgenden Kapiteln vor und wird in eigenen Kursen vorgestellt:

  • Einstieg in Flexbox
    • Warum Flexbox?
    • Responsives Mehrspaltenlayout
     
  • Einstieg in Grid Layout
    • Responsive Raster ohne Media Queries
    • Ausrichtung von Grid-Items
     


Da sich die display-Eigenschaft nicht auf die Kindelemente vererbt, sind die Elemente innerhalb des Grid Layout wieder Block- und Inline-Elemente.

Weitere Werte

Hinweis:
Die folgenden Werte für display wurden eingeführt, um die Positionierung gegenüber dem Floaten von Elementen zu erleichtern. Sie sind heute eher unüblich.
Verwenden Sie für das Layouten von Elementen und Seiten display: flex und display: grid

display: contents

Browserunterstützung
caniuse.com

Das Element wird selbst nicht dargestellt und so behandelt, als befände sich sein Inhalt an seiner Stelle. Ein Styling mit CSS ist nicht möglich. Wenn das Element Teil eines Flex- oder Grid-Containers ist, werden seine Kind-Elemente zu den Flex- bzw. Grid-Items.

none

Ein Element mit display: none; erzeugt keine Box und ist vom Layout-Prozess ausgenommen. Damit ist es unsichtbar und hat keinerlei Auswirkungen auf den Elementfluss.

Assistenztechniken wie Vorlese-Software oder Braille-Zeilen beachten es ebenfalls nicht. Elemente, deren Inhalt zugänglich, aber nicht sichtbar dargestellt werden soll, müssen stattdessen mit anderen Methoden, etwa durch Verschieben aus dem sichtbaren Bereich, versteckt werden.

→ Sichtbarkeit von Elementen
Wie blende ich Elemente so aus, dass sie für Screenreader trotzdem sichtbar sind?

  • Sichtbarkeit von Elementen

    hidden oder display: none?
    visibility und opacity

     

table-*: Darstellung in Tabellenform

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung.

  • display: table-*
    div- und andere Elementen als Tabelle darstellen
     


Weblinks

  1. ↑ W3C: Visual formatting model Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011
  2. ↑ Wikipedia: Textmodus
  3. ↑ W3.org: CSS Display Module Level 3 W3C Candidate Recommendation Draft, 5 June 2026
  4. ↑ W3C: Visual formatting model - 9.3 Positioning schemes (CSS2.2)
  5. ↑ MDN: Normal Flow

Abgerufen am 1.08.2026
von "http://wiki.selfhtml.org/wiki/Benutzer:MScharwies/Layout-Verhalten_mit_display"