边距和填充行为

Question

我从边距中得到奇怪的行为。即使我不在底部附近，也会出现一个垂直滚动条。考虑到我对此进行了测试并在最新版本的 Chrome、IE11 和 Firefox 中得到了相同的结果，我认为这是期望的行为。

以下代码生成滚动条

<html>
<head>
<style>
body { 
    margin: 0;
    height: 100%;
    padding: 1px;
}

div {
    margin: 15px;
}    
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>

将 body 的 padding 更改为 0.1px 会导致没有利润。将 body 的 padding 更改为 0px 也会产生边距。此外，只要 padding 不为零，将 box-sizing: border-box 添加到 body 就会删除滚动条。

我没有添加 Fiddle 因为我不能在那里复制它。您需要在一个简单的 html 文件中对此进行测试。

这实际上是预期的行为吗？是否有合理的解释为什么他们会这样实施？

Answer 1

您看到滚动条的原因似乎是定义 height 和设置 padding 值的组合。 height 属性指示元素内容的高度，不包括添加到该值的边距和填充。添加padding后出现滚动条是因为你把元素高度的内容设置为页面的100%，再加上padding，导致元素整个高度溢出

此外，将 box-sizing 应用于元素会使 height 和 width 属性在值中包含 padding。有趣的是，它不包括 margin。所以如果你要申请：

body {
  box-sizing: border-box,
  margin: 1px,
  padding: 0
}

您仍然会看到滚动条。一旦了解元素的 height 属性默认情况下仅指示元素内内容的高度，它就更有意义了。

希望这对您有所帮助:)

Answer 2

将正文的高度设置为 100% 会使其占据其父元素（即 html 元素）的所有高度。 html 元素的宽度和高度又由它所在的 window 控制。添加边距或边框会增加可用 space 之外的尺寸，从而引发滚动。然而，另一个问题是将边距添加到 div 会将正文向下推 15px。这与利润率下降有关。查看了解更多信息。

边距和填充行为

Margin and Padding behaviour

html

css

margin

padding