这对我来说还没有意义.我错过了什么？
代码低于和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,但到底是怎么回事？
>带边框：没有滚动条
>没有边框,两个顶部边距会崩溃,因此所需的垂直空间应该会减少,但我们会在全高体上获得一个垂直滚动条.
解决方法
这是由于保证金崩溃：
If there is no border,padding,inline content,or clearance to separate the margin-top of a block with the margin-top of its first child block,or no border,height,min-height,or max-height to separate the margin-bottom of a block with the margin-bottom of its last child,then those margins collapse. The collapsed margin ends up outside the parent.
(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)
当.middle没有边框时,应用于.middle div的边距最终会在其外部有效地使身体具有高度：100vh;和margin-top：100px;.这是导致滚动条的原因.
边距为.middle,边距包含在.middle中,因此身体只有高度：100vh;没有滚动条.
作为对此的确认,如果您要向身体添加边框,您会发现获得相同的结果.
* {
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>
