<display-outside>
Die Schlüsselwörter <display-outside> geben den äußeren display-Typ des Elements an, der im Wesentlichen seine Rolle im Flusslayout 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 Level-3-Spezifikation definiert zusammen mit einem Wert aus den <display-inside>-Schlüsselwörtern.
Syntax
Gültige <display-outside>-Werte:
block-
Das Element erzeugt eine Blockelement-Box, die Zeilenumbrüche sowohl vor als auch nach dem Element im normalen Fluss erzeugt.
inline-
Das Element erzeugt ein oder mehrere Inlineelement-Boxen, die keine Zeilenumbrüche vor oder nach sich selbst erzeugen. Im normalen Fluss wird das nächste Element auf derselben Linie sein, wenn Platz vorhanden ist.
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 abwärtskompatibel mit der Einzel-Schlüsselwort-Syntax.
Formale Syntax
Beispiele
Im folgenden Beispiel sind Span-Elemente (normalerweise als Inline-Elemente dargestellt) auf display: block gesetzt, daher brechen sie in neue Zeilen um und dehnen sich in der Inline-Dimension aus, um ihren Container auszufüllen.
HTML
<span>span 1</span> <span>span 2</span>
CSS
span {
display: block;
border: 1px solid rebeccapurple;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-outside |