<display-outside>

<display-outside> 关键字指定了元素的外侧显示（display）类型，即元素在流式布局中的角色。这些关键字用作 display 属性的值，且有作为单个关键字的旧式用法，或按第 3 级规范的定义与 <display-inside> 关键字中的值一同使用。

语法

有效的 <display-outside> 值：

block

元素生成块级元素盒，且在正常流中时，在元素前后均生成断行。

inline

元素生成至少一个行级元素盒，这些盒子不在自身前后生成断行。在正常流中，若有空格则下一元素将在同一行上。

备注：支持二值语法的浏览器在仅找到外侧值时（如指定 display: block 或 display: inline 时）会将内侧值设置为 flow，由此产生预期行为。例如若将元素指定为 block，你会期望此元素的子元素会参与块向和行向的正常流布局。

示例

在下列示例中，片段元素（通常显示为行级元素）设置为 display: block，故元素断入新行且在行向上扩张填充其容器。

HTML

html
<span>片段 1</span> <span>片段 2</span>

CSS

css
span {
  display: block;
  border: 1px solid rebeccapurple;
}

结果

规范

Specification
CSS Display Module Level 3
# typedef-display-outside

浏览器兼容性

css.properties.display.block

BCD tables only load in the browser

css.properties.display.inline

BCD tables only load in the browser

参见