CSS display 属性的 inline 和 block 简单示例

em 和 p 的默认 display

<html>
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>
<style>
  body { background-color: white;}
</style>
</html>

<em> 会创建一个 inline formatting context, 也就是 em 的 display 默认是 inline

<p> 会创建一个 block formatting context, 也就是 p 的 display 默认是 block

修改元素的 display 属性

当然， CSS 允许我们修改这默认行为. 添加如下配置：

p {display: inline;}
em {display: block;}

<html>
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p> text after p.
</body>
<style>
  body { background-color: white;}
  p {display: inline;}
  em {display: block;}
</style>
</html>

看到 em 的内容被显示在单独的一样，以 block 的形式显示。而 p 之后的文本没有重启一行，正匹配 inline 显示形式。

CSS display 属性的 inline 和 block 简单示例

em 和 p 的默认 display

修改元素的 display 属性

分类