Question

这是我的HTML和CSS代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我想知道如何摆脱红盒子和蓝盒子之间的差距。我知道它们之间的差距是存在的，因为下部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;
}

Answer 2

这是另一个解决方案。您只需将overflow: hidden;添加到第二个div。

＆＃13;

#foo {
  border: 1px solid red;
}

#bar {
  border: 1px solid green;
  border-top: 0;
  overflow: hidden;
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

当div的内容有余量时，两个div的边界不会相遇

3 个答案: