這是我的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