Ключевые слова <display-outside> задают внешний тип элемента display, который представляет собой его роль в выводе. Эти ключевые слова используются в качестве значений свойства display, и могут быть использованы в целях обратной совместимости как одиночные ключевые слова, или, как определено в спецификации уровня 3, наряду со значением из ключевых слов <display-inside>.
Синтаксис
Допустимые значения <display-outside>:
block-
Элемент генерирует элемент блока, создавая разрывы строк как перед, так и после элемента в нормальном потоке.
inline-
Элемент генерирует один или несколько блоков элементов, которые не создают разрывы строк перед или после себя. В нормальном потоке следующий элемент будет на той же строке, если есть место.
Примечание: Когда браузеры встречают свойство display со значением только внешнего display (например, display: block или display: inline), внутреннее значение по умолчанию устанавливается в flow (например, display: block flow и display: inline flow). Это обеспечивает обратную совместимость с синтаксисом с одним ключевым словом.
Формальный синтаксис
Примеры
В следующем примере элементы span (обычно отображаемые как inline элементы) устанавливаются в display: block и поэтому переходят на новые строки и расширяются, чтобы заполнить свой контейнер в размерности inline.
HTML
<span>span 1</span> <span>span 2</span>
CSS
span {
display: block;
border: 1px solid rebeccapurple;
}
Результат
Спецификации
| Спецификация |
|---|
| CSS Display Module Level 3 # typedef-display-outside |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
display-outside |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
display-outside |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
css.properties.display.block
Таблицы BCD загружаются только в браузере
css.properties.display.inline
Таблицы BCD загружаются только в браузере
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside
