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

你可以在这里看到小提琴.

three如果孩子有填充物,为什么要弄乱布局呢？我过去曾阅读过有关保证金折叠的各种文章,但我无法使用其中一种技术修复此布局.

Answer 1

很简单只需要添加vertical-align: middle;的.cell类别.

的jsfiddle