示例:https://jsfiddle.net/u2p7fbkm/
HTML:
<div id="alt-color">
<p> First</p>
</div>
<div id="main-color">
<h2>Second</h2>
</div>
CSS:
#alt-color {
background-color: rgba(0, 0, 255, 1);
}
#main-color {
background-color: rgba(255, 0, 0, 1);
}
答案 0 :(得分:1)
h2
和 p
以及其他像 h1
的标签默认有边距(顶部和/或底部)。只需使用 css 删除边距。
作为建议,始终使用每个浏览器提供的开发工具(右键单击 -> 检查元素)并检查应用于元素的样式。将来会为您节省很多时间。
#alt-color{
background-color: rgba(0, 0, 255, 1);
}
#main-color{
background-color: rgba(255, 0, 0, 1);
}
p, h2 {
margin:0
}
<div id="alt-color">
<p> First</p>
</div>
<div id="main-color">
<h2>Second</h2>
</div>
答案 1 :(得分:0)
h2
和 p
标签有边距。使用 margin: 0
删除它们:
#alt-color {
background-color: rgba(0, 0, 255, 1);
}
#main-color {
background-color: rgba(255, 0, 0, 1);
}
p, h2{
margin:0;
}
<div id="alt-color">
<p> First</p>
</div>
<div id="main-color">
<h2>Second</h2>
</div>
或者:
#alt-color {
background-color: rgba(0, 0, 255, 1);
}
#main-color {
background-color: rgba(255, 0, 0, 1);
}
div{
overflow:auto;
}
<div id="alt-color">
<p> First</p>
</div>
<div id="main-color">
<h2>Second</h2>
</div>