<display-outside>

Die <display-outside> Schlüsselwörter geben den äußeren display-Typ eines Elements an, der im Wesentlichen seine Rolle im Fließlayout bestimmt. Diese Schlüsselwörter werden als Werte der display Eigenschaft verwendet und können für Legacy-Zwecke als einzelnes Schlüsselwort verwendet werden oder, wie in der Spezifikation der Stufe 3 definiert, zusammen mit einem Wert aus den <display-inside> Schlüsselwörtern.

Syntax

Gültige <display-outside> Werte:

block

Das Element erzeugt ein Block-Element-Box, das sowohl vor als auch nach dem Element Zeilenumbrüche erzeugt, wenn es im normalen Fluss ist.

inline

Das Element erzeugt eine oder mehrere Inline-Element-Boxen, die keine Zeilenumbrüche vor oder nach sich selbst erzeugen. Im normalen Fluss wird das nächste Element auf derselben Zeile sein, wenn es Platz gibt.

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 Einzel-Schlüsselwort-Syntax.

Formale Syntax

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

Beispiele

Im folgenden Beispiel werden span-Elemente (normalerweise als Inline-Elemente angezeigt) auf display: block gesetzt und brechen daher in neue Zeilen um und erweitern sich im Inline-Dimension, 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