---
title: <display-outside>
slug: Web/CSS/display-outside
tags:
  - CSS
  - CSS Data Type
  - CSS Display
  - Reference
  - display-outside
  - Справка
translation_of: Web/CSS/display-outside
---
<div>{{CSSRef}}</div>

<p class="summary">Ключевые слова <code>&lt;display-outside&gt;</code>  определяют внешний тип отображения элемента (outer {{CSSxRef("display")}} type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства <code>display</code> и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из  {{CSSxRef("&lt;display-inside&gt;")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

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

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>block</code></dt>
 <dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd>
 <dt><code>inline</code></dt>
 <dd>Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd>
 <dt><code>run-in</code> {{Experimental_Inline}}</dt>
 <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как <code>display: run-in, тогда</code>  бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br>
 <br>
 Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd>
</dl>

<div class="note">
<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code>  установят внутреннее значение как <code>flow</code>.  Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p>
</div>

<h2 id="Пример">Пример</h2>

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

<h3 id="HTML"><code>HTML</code></h3>

<pre class="brush: html"><code>
&lt;span&gt;span 1&lt;/span&gt;
&lt;span&gt;span 2&lt;/span&gt;</code></pre>

<h3 id="CSS"><code>CSS</code></h3>

<pre class="brush: css"><code>
span {
    display: block;
    border: 1px solid rebeccapurple;
}</code></pre>

<h3 id="Result"><code>Result</code></h3>

<p><code>{{EmbedLiveSample("Example", 300, 60)}}</code></p>

<h2 id="Совместимость с браузерами" name="Совместимость с браузерами">Совместимость с браузерами</h2>

<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос.</div>

<h3 id="Support_of_run-in"><code>Support of <code>run-in</code></code></h3>

<p><code>{{Compat("css.properties.display.run-in", 10)}}</code></p>

<h2 id="Смотрите_также"><code>Смотрите также</code></h2>

<ul>
 <li><code>{{CSSxRef("display")}}</code></li>
 <li><code>{{CSSxRef("&lt;display-inside&gt;")}}</code></li>
 <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></code></li>
 <li><code><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a> </code></li>
</ul>