<display-outside>

Die <display-outside>-Schlüsselwörter spezifizieren den äußeren Typ der display-Eigenschaft eines Elements, was im Wesentlichen dessen Rolle im Flusslayout beschreibt. Diese Schlüsselwörter werden als Werte der display-Eigenschaft verwendet und können aus Kompatibilitätsgründen als einzelnes Schlüsselwort oder gemäß der Level-3-Spezifikation zusammen mit einem Wert aus den <display-inside>-Schlüsselwörtern definiert werden.

Syntax

Gültige <display-outside>-Werte:

block

Das Element erzeugt ein Blockelement-Kasten, wodurch sowohl vor als auch nach dem Element in normalem Fluss Zeilenumbrüche generiert werden.

inline

Das Element erzeugt einen oder mehrere Inlineelement-Kästen, die keine Zeilenumbrüche vor oder nach sich selbst erzeugen. Im normalen Fluss wird das nächste Element, sofern Platz vorhanden ist, in derselben Zeile angezeigt.

Hinweis: Wenn Browser auf eine display-Eigenschaft mit nur einem äußeren display-Wert stoßen (z. B. display: block oder display: inline), wird der innere Wert standardmäßig auf flow gesetzt (z. B. display: block flow und display: inline flow). Dies ist rückwärtskompatibel mit der Syntax mit einem Schlüsselwort.

Formale Syntax

<display-outside> = 
block |
inline |
run-in

Beispiele

Im folgenden Beispiel werden span-Elemente (normalerweise als Inline-Elemente angezeigt) auf display: block gesetzt. Dadurch werden sie auf neuen Zeilen dargestellt und dehnen sich in der Inline-Dimension so weit wie möglich aus, um ihren Container auszufüllen.

HTML

html
<span>span 1</span> <span>span 2</span>

CSS

css
span {
  display: block;
  border: 1px solid rebeccapurple;
}

Ergebnis

Spezifikationen

Specification
CSS Display Module Level 3
# typedef-display-outside

Browser-Kompatibilität

css.properties.display.block

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch