<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
<span>span 1</span> <span>span 2</span>
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