--- title: <display-outside> slug: Web/CSS/display-outside translation_of: Web/CSS/display-outside --- <div>{{CSSRef}}</div> <p class="summary">The <code><display-outside></code> keywords specify the element’s outer {{CSSxRef("display")}} type, which is essentially its role in flow layout. These keywords are used as values of the <code>display</code> property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the {{CSSxRef("<display-inside>")}} keywords.</p> <h2 id="语法">语法</h2> <p> <code><display-outside></code> 的可用值:</p> <dl> <dt><code>block</code></dt> <dd>这个值会生成一个块级元素盒子,同时在该元素之前和之后打断(换行)。简单来说就是,这个值会将该元素变成<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>。</dd> <dt><code>inline</code></dt> <dd>这个值会生成一个行内元素盒子,该元素之前和之后不会打断(换行)。如果空间充足,该元素后的元素将会在同一行显示。简单来说就是,这个值会将该元素变成<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements">行内元素</a>。</dd> <dt><code>run-in</code> {{Experimental_Inline}}</dt> <dd>这个值生成一个run-in盒子。如果其后的兄弟元素是块级盒子,那么这个run-in盒子就会以兄弟元素的第一个行内元素盒子的形式存在;如果其后的兄弟元素是行内元素,那么这个run-in盒子会变成块级元素。</dd> <dd>run-in元素的存在形式取决于相邻的元素,如果它的内部存在block box,那么它会变成块级元素盒子。</dd> </dl> <div class="note"> <p><strong>Note</strong>: Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p> </div> <h2 id="举例">举例</h2> <p>In the following example, span elements (normally displayed as inline elements) are set to <code>display: block</code> and so break onto new lines and expand to fill their container in the inline dimension.</p> <h3 id="HTML">HTML</h3> <pre class="brush: html notranslate"><span>span 1</span> <span>span 2</span></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css notranslate">span { display: block; border: 1px solid rebeccapurple; }</pre> <h3 id="Result">Result</h3> <p>{{EmbedLiveSample("Examples", 300, 60)}}</p> <h2 id="Specifications" name="Specifications">Specifications</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}</td> <td>{{Spec2('CSS3 Display')}}</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> <p>{{Compat("css.properties.display.display-outside", 10)}}</p> <h2 id="其它">其它</h2> <ul> <li>{{CSSxRef("display")}} <ul> <li>{{CSSxRef("<display-inside>")}}</li> <li>{{CSSxRef("<display-listitem>")}}</li> <li>{{CSSxRef("<display-internal>")}}</li> <li>{{CSSxRef("<display-box>")}}</li> <li>{{CSSxRef("<display-legacy>")}}</li> </ul> </li> <li><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></li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li> </ul>