Тип CSS `<display-outside>`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Ключевые слова <display-outside> задают внешний тип элемента display, который по сути определяет его роль в потоковой раскладке. Эти ключевые слова используются в качестве значений свойства display и могут применяться для обратной совместимости как отдельное ключевое слово или, согласно спецификации Level 3, вместе со значением из набора ключевых слов <display-inside>.

Синтаксис

Допустимые значения <display-outside>:

block: Элемент создаёт блочный контейнер, который в обычном потоке формирует разрывы строк до и после себя.
inline: Элемент создаёт один или несколько строчных контейнеров, которые не формируют разрывы строк до или после себя. В обычном потоке следующий элемент будет находиться на той же строке, если для него есть место.

Примечание: Когда браузеры встречают свойство display, содержащее только значение display типа внешнего (например, display: block или display: inline), внутреннее значение по умолчанию — flow (например, display: block flow и display: inline flow). Это обеспечивает обратную совместимость с синтаксисом с одним ключевым словом.

Формальный синтаксис

<display-outside> = 
  block |
  inline |
  run-in

Примеры

В следующем примере для элементов span (которые обычно отображаются как строчные элементы) задано значение display: block, поэтому они переносятся на новые строки и расширяются, чтобы заполнить контейнер по строчному измерению.

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	WebView на iOS
`block`	1	12	1	7	1	18	4	10.1	1	1.0	4.4	1
`inline`	1	12	1	7	1	18	4	10.1	1	1.0	4.4	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/display-outside