为什么添加border会影响滚动条？

Question

遇到一个奇怪的问题.

当给body元素添加border属性时，竖直方向的滚动条范围极小

有border的codepen示例

https://codepen.io/dumbdonkey...

但是一旦移除body元素中的border属性，竖直方向的滚动条范围就会变得很大.

没有border的codepen示例

https://codepen.io/dumbdonkey...

不明白为什么会有这样的差异. ?

哪位同学能解释一下吗？多谢了

我的浏览器版本是:

chrome 版本 75.0.3770.100

结案:

根据@大米绿豆 的回答，我总结下原因. ?

造成这种现象的原因是由于margin collapse 造成的.

详细解释

https://developer.mozilla.org...

Parent and first/last child

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

在没有给body设置border的情况下，body和div元素和进行margin collapse,collapse之后，body相对于html元素向下移动margin-top的位置,html元素判断内部元素溢出，从而出现滚动条.

给body设置border之后，body和div之间不在有margin collapse。body也就不会溢出html元素，自然也就没有滚动条了.

Answer 1

这个其实css基础的问题

1. 造成这种情况的原因是你给div设置了margin-top; 造成div拖着body也下来了.所以产生了滚动条.你可以看下html和body的高还是一样的.除去border的10px; 只是body向下移动了, 才有了滚动条.滚动条的长度其实正好是你这个margin-top的高度.
2. 这个时候其实你有几种办法解决这种问题. 其实一种你已经知道了,就是给父盒子设置border. 恭喜你实践成才. 还有多种, 比如给父元素设置overflow:hidden ;给父元素浮动等;你可以给body设置这俩属性 实验一下;你要想证实这个,可以取消margin.这个时候无论你给body加不加border.都不会再有这么长的滚动条了. 当然了 你要加100px的边框, 滚动条还是很长嘛.
3. 建议多了解css基础.比如margin塌陷这种. css不比js. js我们说只要逻辑好,顺着逻辑写就行. css不把它的特性弄懂.就比较不要理解.

Answer 2

总结移至原题目下方

Answer 3

不是一样么...我没发现滚动条有什么区别

Answer 4

你能截图吗?可能你浏览器问题