<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
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
<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 |
Browser-Kompatibilität
css.properties.display.block
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inline |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support