边距和填充行为答案

【问题标题】：Margin and Padding behaviour边距和填充行为
【发布时间】：2016-04-11 03:24:22
【问题描述】：

我从边缘得到奇怪的行为。即使我不在底部附近，也会出现一个垂直滚动条。我认为这是期望的行为，考虑到我对此进行了测试并在最新版本的 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 文件中对此进行测试。

这实际上是预期的行为吗？有没有合乎逻辑的解释为什么他们这样实现？

【问题讨论】：

标签： html css margin padding

【解决方案1】：

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

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

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

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

希望这会有所帮助:)

【讨论】：

【解决方案2】：

将 body 的高度设置为 100% 使其占据其父元素（即 html 元素）的所有高度。 html 元素的宽度和高度依次由它所在的窗口控制。添加边距或边框会增加超出可用空间的尺寸，从而引发滚动。但是，另一个问题是向 div 添加边距会将主体向下推 15px。这与折叠边距有关。查看https://stackoverflow.com/a/2680515/6184852 了解更多信息。

【讨论】：