<display-outside>

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

Синтаксис

Значение <display-outside> определяется с использованием ключевого слова из списка ниже:

Значения

block

Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.

inline

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

run-in Экспериментальная возможность

Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как display: run-in, тогда бокс является блоковым боксом, run-in бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним.

Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.

Примечание: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении display: block или display: inline, установят внутреннее значение как flow. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.

Пример

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

HTML

html
<span>span 1</span> <span>span 2</span>

CSS

css
span {
  display: block;
  border: 1px solid rebeccapurple;
}

Result

Совместимость с браузерами

css.properties.display.block

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также