html - 当 div 的内容有边距时，两个 div 的边框不相交

Question

这是我的 HTML 和 CSS 代码。

#foo {
  border: 1px solid red;
}

#bar {
  border: 1px solid green;
  border-top: 0;
}

<div id="foo">
<p>
Foo
</p>
<p>
Foo
</p>
</div>
<div id="bar">
<p>
Bar
</p>
<p>
Bar
</p>
</div>

我想知道如何消除红框和蓝框之间的间隙。我知道它们之间存在差距是因为下部 div 中的段落元素存在边距。我想了解如何进行优雅的修复以消除这种差距。

Answer 1

去除段落标签上的边距并将其切换为填充，或者向您的 div 添加填充并完全去除 p 标签。假设您的 p 标记的上下边距为 16px，替代方案可能如下所示:

#foo {
  border: 1px solid red;
}
#foo p {
    margin: 0;
    padding: 16px 0;
}
#bar {
    border: 1px solid green;
    border-top: 0;
}
#bar p {
    margin: 0;
    padding: 16px 0;
}