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

查看this回答它应该足够清楚。

主要观点是相邻元素的边距（在这种情况下是你的div和body）正在折叠，取两个边距的最大值。