具有垂直边距的浮动div和标题错误地对齐

Question

我有以下标记:

<div class="twocol float-left">
    <h4>left</h4>
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>

<div class="twocol">
    <h4>right</h4>
    <p>foo</p>
    <p>bar</p>
    <p>foobar</p>
</div>?

CSS:

.twocol {
    margin-right: 1em;
}

.float-left {
    float: left;
}

h4 {
    margin: 1em 0;
    font-weight: bold;
}

DEMO

问题

标题的垂直位置应相等,但"右" 1 em位于"左"之上.为什么？以及如何解决这个问题？

Answer 1

这里的问题是由于利润率下降.默认情况下,身体上有一些边距.当两个边距符合浏览器时,选择两者中较大的一个并应用它.当您浮动一列时,这会破坏折叠边距并且正在应用两个边距.

我为你的小提琴添加了一些背景颜色来说明这一点. http://jsfiddle.net/Hu5ZH/2/

要了解有关折叠边距的更多信息,请访问:http: //www.w3.org/TR/CSS2/box.html#collapsing-margins