css – 为什么边界会影响div边界？

2023年11月4日 305次阅读

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

最佳答案 我认为这与保证金崩溃有关.如果没有边界,边缘会随着周围的空白而崩溃.这使得看起来边缘没有任何影响,因为您希望它引用.bodyCopy.添加边框：1px实心粉红色使边距无法折叠.对于正边际而言,这是更清楚的,在我看来,负边缘的崩溃感觉有点奇怪.

坦率地说,我对保证金崩溃知之甚少,但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>
点赞