1

空的 p 元素是什么意思？为什么渲染成现在的样子？

<p>Something...</p>
<p></p>
<p>Something else...</p>

<p></p>: Chrome 会忽略它 - 但它声称给它一个-webkit-margin-after:1em，但它以某种方式与以下段落的文本重叠（参见开发者模式）

<p style='margin-top:2em'>: Chrome 显示上边距

<p style='font-size:2em'>: Chrome 显示它，即使它是空的？？？？

4

3 回答 3

1

根据 HTML 4.01 规范，空p元素应该被浏览器忽略，作者不应该使用它们。因此，询问浏览器对此做了什么，就是询问它们在处理不应使用的构造时如何行为不端（未能遵循建议）。需要针对每个浏览器和版本分别进行实验。

于 2012-11-23T15:35:50.157 回答
0

在 chrome 和其他浏览器中测试。但是没有发现任何差异。如果没有内容

. 该标签未显示在任何浏览器中。

于 2012-11-23T14:53:32.037 回答
0

引用developer.mozilla.org/en-US/docs/CSS/margin_collapsing [感谢 Llepwryd 的评论，它提供了急需的信息]

空块：如果没有边框、内边距、内联内容、高度或最小高度将块的上边距与其下边距分开，则其上边距和下边距折叠。

所以：

<p></p>: 没有内容或高度，上下边距折叠成 1em。开发人员模式显示 2em 的边距，与下一段的文本重叠 - 我猜这是一个错误？

<p style='margin-top:2em'>: 同上，除了边距折叠到 2em。

<p style='font-size:2em'>：一些猜测 - 边距为 1em，其中边距em等于段落的字体大小，因此 1em 的边距等于2em 的常规文本。现在同上，折叠边距，第一段和第三段之间有 2em 的间距。

于 2012-11-23T15:05:06.727 回答