Question

在this JSFiddle中，文字紧贴粉红色父div的顶部和底部。但是，当您从粉色父div中删除粉色边框时，文本和父div之间会有空格。

为什么会这样？

这是我的CSS：

.bodyCopy {
  background: pink;
  border: 1px solid pink;
}

p {
  line-height: 28px;
  margin-bottom: 20px;
}

.bodyCopy > p:first-child {
  margin-top: -9px;
}

.bodyCopy > p:last-child {
  margin-bottom: -9px;
}

Answer 1

我认为这与保证金崩溃有关。如果没有边界，边缘会随着周围的空白而崩溃。这使得看起来边缘没有任何影响，因为您希望它引用.bodyCopy。添加border: 1px solid pink会使边距无法崩溃。对于正边际，这是更清楚的，在我认为负边缘的崩溃感觉有点奇怪。

坦率地说，我对保证金折叠的了解不多，但https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing应该会为您提供更多背景信息。

我试图用一个小例子来说明一点。

.container {
  padding: 10px;
}

.box {
  background-color: #f99;
}

.border {
  border: 1px solid #c66;
}

.positive-margin {
  margin: 10px 0;
}

.negative-margin {
  margin: -10px 0;
}

p {
  margin: 0;
}

<div class="container">
  <div class="box">
    <p>box</p>
  </div>
</div>

<div class="container">
  <div class="box">
    <p class="positive-margin">box positive-margin</p>
  </div>
</div>

<div class="container">
  <div class="box">
    <p class="negative-margin">box positive-margin</p>
  </div>
</div>

<div class="container">
  <div class="box border">
    <p class="positive-margin">box positive-margin border</p>
  </div>
</div>

<div class="container">
  <div class="box border">
    <p class="negative-margin">box negative-margin border</p>
  </div>
</div>

Answer 2

因为它正在改变div外部的大小，所以边框会增加外面的元素。

如果你添加一个比边框更大的填充，那么你可以检查发生了什么，检查这个小提琴：http://jsfiddle.net/es91825w/

.bodyCopy {
    background: pink;
    border: 1px solid pink;
    padding: 3px;
}

Answer 3

边框会阻止第一个<p>元素的-9px上边距与bocyCopy div的上边距折叠，因此它适用于p元素，使其内容紧贴。

没有边框，没有什么可以阻止第一个<p>元素的上边距折叠到bocyCopy div的上边距，留下<p>元素的上边距默认为0px。

Answer 4

边框会阻止段落的垂直边距折叠，并且由于您正在折叠负边距，它们将会展开。在这种意义上的崩溃意味着摆脱。这是对利润率下降的解释。

http://www.sitepoint.com/web-foundations/collapsing-margins/

简而言之，你可以给.bodyCopy div一个1px的填充（并调整你的段落边距1px来补偿），以防止这种情况发生。

为什么边界影响div边界？

4 个答案: