<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

BCD tables only load in the browser

css.properties.display.inline

BCD tables only load in the browser

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