html - 删除 <div> 元素上方和下方的边距？

Question

我遇到了与 <div> 的边距相关的奇怪行为元素。 I've added a very simple test case to jsFiddle to show you what I mean .

有趣的是，使用边框时边距的使用是正确的。这是默认行为吗？这与利润率下降有关系吗？是否有可能以某种方式在没有任何黑客攻击的情况下强制执行边距？

到目前为止我想到的最不丑陋的解决方案:

.cssContainer {
    margin:10px;
    padding:0.1px;

    background-color:#FF0000;
}

但我不知道这是否适用于所有浏览器。

Answer 1

这是添加 overflow:auto 的另一种情况!

jsFiddle example

只需将 overflow:auto 添加到您的容器 div 中，瞧，和谐就恢复了。

.cssContainer {
    margin:10px;
    padding:0px;
    overflow:auto;
    background-color:#FF0000;
}

来自 specs ，之所以可行，是因为通过应用 overflow 而不是 visible 来建立新的 block formatting context，强制 .cssContainer 的边距 不会与其流入的子元素 .cssElement 一起折叠。