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

我有两列布局。因为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-修改那里的填充。

最佳答案

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

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

jsFiddle example
默认的垂直对齐方式是baseline，这是您最后看到的。

关于html - 为什么一个单元格中元素的填充会影响另一个单元格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23375166/