<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

BCD tables only load in the browser

css.properties.display.inline

BCD tables only load in the browser

Siehe auch