这是我的HTML和CSS代码。当div的内容有保证金时，两个div的边界不符合
#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中的段落元素造成的余量。我想学习如何做一个优雅的修复，摆脱这种差距。
摆脱段落标签的边距并将其切换为填充，或者将填充添加到您的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;
}
我将需要段落标签的边距，因为在我的真实应用中，我有多个段落i每个div。 –
这很好。填充将以与边距相同的方式工作，并给出段落之间的间距。 –
这里是一个更解决方案。您可以将overflow: hidden;添加到第二个div。
#foo {
border: 1px solid red;
}
#bar {
border: 1px solid green;
border-top: 0;
overflow: hidden;
}<div id="foo">
<p>
Foo
</p>
<p>
Foo
</p>
</div>
<div id="bar">
<p>
Bar
</p>
<p>
Bar
</p>
</div>#foo {
border: 1px solid red;
}
#bar {
border: 1px solid green;
border-top: 0;
}
.foobar p {
margin: 0 0 0.5em;
padding: 0.25em;
border-bottom: 1px solid #eeeeee;
}
.foobar p:last-child { margin-bottom: 0; }<div id="foo" class="foobar">
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
</p>
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
</p>
</div>
<div id="bar" class="foobar">
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
</p>
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
</p>
</div>
它的[余量塌陷]一个很好的例子（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing），并且有很多方法来防止这种情况，例如使用溢出，浮动，flexbox等。 – Stickers