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

Question

我有一个两列布局。因为并非所有我们想要支持的浏览器都支持 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 — 只需修改那里的填充。

Answer 1

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

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

jsFiddle example

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