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

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

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

jsFiddle 示例

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