<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 beschreibt. 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 ein Blockelement-Box, das sowohl vor als auch nach dem Element Zeilenumbrüche im normalen Fluss erzeugt.
inline-
Das Element erzeugt eine oder mehrere Inlineelement-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in derselben Zeile sein, wenn ausreichend 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 auf flow Voreingestellt (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 Inlineelemente angezeigt) auf display: block gesetzt, wodurch sie in neue Zeilen umbrechen und sich im Inline-Dimensionsbereich ihres Containers ausweiten.
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
Loading…
css.properties.display.inline
Loading…