为什么1px边框取消100px margin-top并杀死滚动条？

Question

这对我来说还没有意义。我错过了什么？

代码位于on Codepen下方。

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

body {
  height: 100vh;
  background: pink;
}

.middle {
  position: relative;
  top: 200px;
  /* uncomment the border to kill the scrollbar! */
/* border: 1px solid green; */
}

.middle div {
  margin-top: 100px;
  border: 1px dashed yellow;
}

<div class="middle">
  <div>Text</div>
</div>

box-sizing: border-box;没有任何区别。添加border会导致vertical margins to not collapse，但究竟发生了什么？

• 带边框：无滚动条
• 没有边框，两个顶部边距会崩溃，因此应该需要 less 垂直空间，但我们会在全高{{1}上获得一个垂直滚动条}。

Answer 1

这是由于保证金崩溃：

  

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

（https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing）

当.middle没有border时，margin应用于.middle div最终会超出body，有效地使height: 100vh;拥有margin-top: 100px; border。这是导致滚动条的原因。

.middle margin .middle body {}包含height: 100vh;所以border只有body且没有滚动条。

作为对此的确认，如果您要将* { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100vh; background: pink; border: 1px solid red; } .middle { position: relative; top: 200px; /* uncomment the border to kill the scrollbar! */ /* border: 1px solid green; */ } .middle div { margin-top: 100px; border: 1px dashed yellow; }添加到<div class="middle"> <div><a href="https://iDoRecall.com">Text</a> </div> </div>，您会发现相同的结果。

＆＃13;

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;