<display-outside>
Die <display-outside>-Schlüsselwörter geben den äußeren display-Typ des Elements an, was im Wesentlichen seine Rolle im Flusslayout ist. Diese Schlüsselwörter werden als Werte der display-Eigenschaft verwendet und können aus Kompatibilitätsgründen als einzelnes Schlüsselwort oder wie in der Level-3-Spezifikation 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 Blockelementbox, die sowohl vor als auch nach dem Element im normalen Fluss Zeilenumbrüche erzeugt.
inline-
Das Element erzeugt eine oder mehrere Inline-Elementboxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in der gleichen Zeile sein, wenn Platz vorhanden ist.
Hinweis:
Wenn Browser auf eine display-Eigenschaft mit nur einem äußeren display-Wert treffen (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 für ein Schlüsselwort.
Formal syntax
<display-outside> =
block |
inline |
run-in
Beispiele
Im folgenden Beispiel werden Span-Elemente (normalerweise als Inline-Elemente angezeigt) auf display: block gesetzt, wodurch sie auf neue Zeilen brechen und sich im Inline-Dimension in ihrem Container ausdehnen.
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 |