html - 内部 div 填充会影响外部 div 定位。 ( margin 崩溃？)

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;
}

你可以看到 fiddle here .

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

Answer 1

在.cell类中添加vertical-align: middle;很简单

jsFiddle