为什么一个单元格中元素的填充会影响另一个单元格？答案

【问题标题】：Why does the padding of an element in one cell affect another cell?为什么一个单元格中元素的填充会影响另一个单元格？
【发布时间】：2014-06-16 00:15:54
【问题描述】：

我有一个两列布局。因为并不是所有我们想要支持的浏览器都支持 flex 布局，所以我使用了 display: table 和 display: table-cell。

我当前的问题是，如果我修改#sidebar > div > div 的顶部填充，MAIN 内容会受到影响，但它不应该受到影响。所以有两个问题：

为什么MAIN 会受到#sidebar > div > div 顶部填充更改的影响？
我怎样才能让它不受影响？

HTML

<div id="wrapper">
    <div id="sidebar">
        <div class="inner">
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
            <div>TEST</div>
        </div>
    </div>
    <div id="content">
        <div class="inner">MAIN</div>
    </div>
</div>

CSS

body {
    background: #ecf0f1;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
#wrapper {
    display: table;
}
#sidebar {
    display: table-cell;
    background: #2c3e50;
    color: #ecf0f1;
    width: 200px;
}
#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
}
.inner {
    min-height: 100vh;
    padding: 0px 10px;
}
#sidebar > div > div {
    padding: 5px;
    padding-top: 50px;
    margin: 1px 0;
}

jsFiddle — 只需修改那里的填充。

【问题讨论】：

标签： html css padding two-column-layout

【解决方案1】：

因为您没有为 MAIN div 指定 vertical-align:top;。

#content {
    display: table-cell;
    background: #ecf0f1;
    color: #2c3e50;
    vertical-align:top;
}

jsFiddle example

默认的垂直对齐是基线，这是您最终看到的。

【讨论】：