HTML / CSS - 神秘的顶部填充，没有消失 [英] HTML/CSS - Mysterious Top Padding that doesn't go away

问题描述

我使用CSS做一个列布局，它是沿着游泳。令人惊讶的是，我的问题不是如何使列的工作;这是功能。但我反而在我的列的顶部，一个神秘的填充，正在推下内容。我在这里准备了一个例子：

I am making a column layout with CSS, and it is coming along swimmingly. Surprisingly enough my question is not about how to make the columns work; That is functioning. But I am instead getting an eerie mysterious "padding" at the top of my columns that is pushing down content. I have prepared an example here :

<div id="top"></div>
<div id="main">
    <div id="left">
        <div>menu items</div>
    </div>
    <div id="center">
        <h3>Not at the Top!</h3>

    </div>
    <div id="right">
        <header>Right Top</header>
        <article>Right Body</article>
    </div>
</div>

这里是相关的CSS：

#top {
    background-color: #25282b;
    height: 64px;
}
#main {
    width: 100%;
    display: table;
}
#left, #center, #right {
    display: table-cell;
    margin: 0px;
}
#left {
    width: 150px;
    background-color: rgba(38, 46, 51, 1);
    color: #7d8285;
}
#left div:first-child {
    padding-top: 10px;
}
#center {
    width: 228px;
    background-color: rgba(57, 65, 71, 1);
    color: #999ea1;
}
#center div:first-child {
    padding: 15px;
}
#center div:first-child h3 {
    color: #fff;
    margin-bottom: 2px;
}
#right {
    background-color: rgba(255, 255, 255, 1);
}
#right header {
    background-color: #3e7aa5;
    height: 92px;
}
#right article {
    padding: 10px;
    background-color: #fff;
}

我真的不确定是什么原因。第二列刚刚被完全按下，然后第三个也被推下，不管我指定的规则。

I'm really not certain what is causing it. The second column just gets outright pushed down a bit, and then the third one gets pushed down as well, regardless of the rules I specify.

推荐答案

由于 #right 是 table-cell 元素，您可以添加 vertical-align：top 来解决这个问题。对于什么是值得的，这不是填充，它只是这些元素被渲染的方式，默认行为是对齐到默认值 baseline 。

Given that #right is a table-cell element, you could add vertical-align:top to it in order to solve this. For what it's worth, this wasn't padding, it's just the way these elements are rendered as the default behavior is to align to the default value baseline.

更新示例

#right {
    background-color: rgba(255, 255, 255, 1);
    vertical-align: top;
}

这篇关于HTML / CSS - 神秘的顶部填充，没有消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！