Question

由于<span>是一个内联元素，而<p>是一个块元素，我无法理解如何在<p>内嵌套<span>元素元素将带有块元素。这是我的示例：

div {
  background-color: cyan;
  border: solid;
}

p {
  border: solid;
}

<div>
  <span><p>STACK OVERFLOW</p> </span>
  <span><p>STACK OVERFLOW</p></span>
  <span><p>STACK OVERFLOW</p></span>
</div>

Answer 1

您根本无法在p元素内嵌套span元素。 span element's content model应该为phrasing content，其中不包括诸如p和标题元素的元素。由于span元素的结束标记不是必需的（即是必需的），因此p元素的开始标记不会隐式地关闭span元素，因此会出现验证错误。但是，浏览器尝试从错误中恢复，并且仍将p元素呈现为block元素。

为避免将来出现此类错误，我建议使用W3C's HTML Validator验证HTML代码，并咨询HTML5 specification（或类似参考文献）有关内容模型的信息。

为什么<span>中嵌套的<p>导致块元素？

1 个答案: