HTML中不存在的特殊元素空间

我有一个布局，应该是相当简单的，但不知什么原因，只有这个神奇的空间出现在。。。。。。没有什么。它没有任何元素。我无法解释

我有一张图片和一个重现问题的JSFIDLE。这在所有浏览器中都会发生

---

它来自这里的

p

元素：

<div class="container"> 
    <article>
        <p>
            This information is appearing below a strange white bar that really shouldn't be there...
        </p>
    </article>
</div>

要修复它，您可以将
溢出：隐藏
添加到
文章中，如下所示：
它来自此处的
p
元素：

<div class="container"> 
    <article>
        <p>
            This information is appearing below a strange white bar that really shouldn't be there...
        </p>
    </article>
</div>





要修复它，您可以在
文章中添加
overflow:hidden
，如下所示：
如果您在最喜欢的浏览器开发工具（如Firefox的Firebug）中查看它，您将看到它是默认的边距。将div的填充设置为1em，它应该消失

或者您也可以设置
p{margin:0}
，但这将从所有
标记中删除边距，这可能是不需要的。
如果您在最喜欢的浏览器开发工具（如Firefox的Firebug）中查看它，您将看到它是默认边距。将div的填充设置为1em，它应该消失

或者您也可以设置
p{margin:0}
，但这将从所有
标记中删除边距，这可能是不需要的。如果你把
*{margin:0}
放进去，它会工作的。它肯定是有边距的。如果你把
*{margin:0}
放进去就行了。同意。试着去掉页边空白。我太迷路了。这真的被认为是一个特性吗？人们对你链接的第一个网站的评论方式让人觉得这是一件“好事”。这似乎是一个可怕的缺陷！从
p
中删除
margin
s会起作用，但是您通常希望
p
元素具有一些
margin
。这就是为什么我建议“修复”崩溃的边距。@Ciel:信不信由你，这很有用。Sitepoint文章的最后一段很好地总结了这一点：“虽然页边折叠行为一开始有点不直观，但在多个嵌套元素的情况下，这种行为通常是可取的。如上所示，如果需要，可以使用简单的方法帮助您停止折叠。”设置
溢出：隐藏的
不会导致
大小调整的其他问题吗？同意。试着去掉页边空白。我太迷路了。这真的被认为是一个特性吗？人们对你链接的第一个网站的评论方式让人觉得这是一件“好事”。这似乎是一个可怕的缺陷！从
p
中删除
margin
s会起作用，但是您通常希望
p
元素具有一些
margin
。这就是为什么我建议“修复”崩溃的边距。@Ciel:信不信由你，这很有用。Sitepoint文章的最后一段很好地总结了这一点：“虽然页边折叠行为一开始有点不直观，但在多个嵌套元素的情况下，这种行为通常是可取的。如上所示，如果需要，可以使用简单的方法帮助您停止折叠。”设置
溢出：隐藏的
不会导致
大小调整的方式出现其他问题吗？只有父div或
，以具有背景色的为准。设置
填充：1px
（或
填充：无论什么
），因为它停止了边距折叠。下面是我答案中的JSFIDLE，用
溢出：隐藏
替换为
填充：1px
：@thirtydot-哈，我从来没有想过这样做。我总是将填充设置为等于有罪元素的边距，这对我来说一直很有效。我知道边距折叠，但假设它只在两个元素相同（例如两个相邻的
标记）时才起作用。只有父div或
，以具有背景色的为准。设置
padding:1px
（或
padding:which
）会起作用，因为它会停止边距折叠。下面是我答案中的JSFIDLE，用
溢出：隐藏
替换为
填充：1px
：@thirtydot-哈，我从来没有想过这样做。我总是将填充设置为等于有罪元素的边距，这对我来说一直很有效。我知道边距折叠，但假设它只在两个元素相同（例如两个相邻的
标记）时起作用。