<display-outside> CSS-Typ
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die <display-outside> Schlüsselwörter legen den äußeren display-Typ des Elements fest, was im Wesentlichen seine Rolle im Flusslayout ist. Diese Schlüsselwörter werden als Werte der display-Eigenschaft verwendet und können zum Erhalt der Kompatibilität als einzelnes Schlüsselwort oder wie in der Spezifikation der Stufe 3 definiert zusammen mit einem Wert aus den <display-inside>-Schlüsselwörtern verwendet werden.
Syntax
Gültige <display-outside>-Werte:
block-
Das Element erzeugt eine Block-Element-Box, die sowohl vor als auch nach dem Element im normalen Fluss Zeilenumbrüche erzeugt.
inline-
Das Element erzeugt eine oder mehrere Inline-Element-Boxen, die keine Zeilenumbrüche vor oder nach sich generieren. Im normalen Fluss befindet sich das nächste Element in derselben Zeile, sofern Platz vorhanden ist.
Hinweis:
Wenn Browser eine display-Eigenschaft mit nur einem äußeren display-Wert (z. B. display: block oder display: inline) erkennen, 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 (die normalerweise als Inline-Elemente angezeigt werden) auf display: block gesetzt und brechen so in neue Zeilen um und füllen in der Inline-Dimension ihren Container aus.
HTML
<span>span 1</span> <span>span 2</span>
CSS
span {
display: block;
border: 1px solid rebeccapurple;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Display Module Level 3 # typedef-display-outside |
