内部div填充影响外部div定位。 （保证金崩溃？）

Question

我有以下HTML：

<p>messy</p>
<div class="row">
    <div class="cell">
        <div class="one wrapper">1</div>
    </div>
    <div class="cell">
        <div class="two wrapper">2</div>
    </div>
    <div class="cell">
        <div class="three wrapper">
            <div class="foo">3</div>
        </div>
    </div>
</div>

<p>good</p>

<div class="row">
    <div class="cell">
        <div class="one wrapper">1</div>
    </div>
    <div class="cell">
        <div class="two wrapper">2</div>
    </div>
    <div class="cell">
        <div class="three wrapper">3</div>
    </div>
</div>

使用这个CSS：

.row {
    display: table;
    table-layout: fixed;
    overflow: hidden;
    background-color:blue;
    width:100%;
}
.cell {
    display: table-cell;
    overflow: hidden;
    padding: 0;
}
.wrapper {
    overflow: hidden;
    position: relative;
    padding:0;
    display: block;
    height:42px;
    background-color:red;
}
.one {
    width:100px;
}
.two {
    width:40px;
}
.three {
    width:100px;
}
.foo {
    padding: 10px;
}

你可以看到小提琴here。

为什么three弄乱了布局以防孩子有填充？我过去曾阅读过有关margin collapsing的各种文章，但我无法使用其中一种技术修复此布局。

Answer 1

这很简单，只需在vertical-align: middle;类中添加.cell。

<强> jsFiddle