This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<display-outside>
Ключевые слова<display-outside> определяют внешний тип отображения элемента (outerdisplay 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;}