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/

Answer 2

如果你在你最喜欢的浏览器的开发者工具（例如Firefox的Firebug）中查看它，你会发现它是默认的保证金。将div的填充设置为1em，它应该消失。

或者你也可以设置p {margin:0}，但这会删除所有<p>代码中的边距，这可能是不可取的。