为什么人体内部顶层元素的边距会改变人体的高度？

Question

我有以下html：

<style>
    body {
        margin: 0;
        height: 100vh;
    }
    div {
        margin: 1px;
    }
</style>


<body>
<div>feck</div>
</body>

div的页边距会导致滚动条，即使div本身离页面的高度也不远。 没有div的边距，就没有滚动条。 这是怎么回事？ 这是浏览器错误吗？

Answer 1

利润率下降。 由于div是主体中最顶层的元素，因此div的边距随主体的边距而折叠。 也就是说，身体也获得相同的余量。

您可能会认为“崩溃”不是此行为的正确词，您将是正确的，但这就是他们选择的词。 抱歉。

有几种解决方案：

Answer 2

因为div是一个块元素。 它位于Dom中，因此占用空间。 在顶部添加边距时，您正在向下推其空间，因此增加了其占用的空间总量。

如果要向下推div，而又不更改容器（主体）的整体高度，则可以给div设置相对位置，并在顶部设置1px。

div {
  position: relative;
  top: 1px;
}

Answer 3

看看这个答案应该很清楚。

要点是，相邻元素的边距（在本例中为div和body）正在崩溃，取两个边距的最大值。