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

Question

我有一个应该相当简单的布局，但出于某种未知原因，这个神奇的空间出现在......什么都没有。没有它的元素。我无法解释。

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

http://jsfiddle.net/ciel/qSQ7b/

Answer 1

它来自此处的 p 元素:

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

你被崩溃的边距咬伤了:

• http://reference.sitepoint.com/css/collapsingmargins
• http://www.w3.org/TR/CSS2/box.html#collapsing-margins

要修复它，您可以将 overflow: hidden 添加到您的 article 中，如下所示:http://jsfiddle.net/qSQ7b/3/