添加 Header 移动 Div

Question

每当我向标题中的第二个 div 添加标题时，它都会向下移动。我已经看到了这个问题的几个答案，但到目前为止没有一个有效，所以这是不同的，或者我做错了。

这是我的标题

<div id='header' class='full'>
    <div id='headerhead' class='full'></div>
    <div id='headertext' class='full'><h1>Protocol Grean</h1></div>
    <div id='headerbuttons'></div>
</div>

这是四个 div 的 CSS

#header {
    height: 200px;
    background-color: green;
}
#headerhead {
    height: 50px;
    background-color: darkgreen;
}
#headertext {
    padding-left: 50px;
    height: 100px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    background-color: pink;
}
#headerbuttons {
    height: 50px;
    background-color: blue;
}

我需要添加什么才能使 HeaderText 不向下浮动？垂直对齐似乎对我没有任何作用，绝对位置只会让 HeaderButtons 消失。

Answer 1

您需要从 h1 元素中删除 margin：

#headertext h1 {
    margin: 0;
}