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

Question

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

代码在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;没有任何区别.添加边框会导致垂直边距不会崩溃,但具体到底是什么？

• 带边框:没有滚动条
• 没有边框,两个顶部边距会崩溃,所以应该需要更少的垂直空间,但我们在全高度上得到一个垂直滚动条body.

Answer 1

这是由于保证金崩溃:

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

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