html 中 p 标签的嵌套规则

发表于

偶然遇到了

标签的嵌套问题，有必要mark一下。

p 标签内部不能嵌套 原始块元素，否则会通过自动闭合p标签，使块元素暴露出来

例如如下写法

1
2
3
4
5
6
<p id="a">
  <p id="b">
    <div style="display: inline">123</div>
    <a href="" id="c">ccc</a>
  </p>
</p>

经过浏览器就会解析成

1
2
3
4
5
6
<p id="a"></p>
<p id="b"></p>
<div style="display: inline">123</div>
<a href="" id="c">ccc</a>
<p></p>
<p></p>

div 虽然加上了 display:inline 但是其本身是块级元素，所以在p标签中依然当做块元素对待