为何body元素尺寸小于html元素？已设边距内边距为0

问题背景 #

我已将所有margin和padding设为0，global.css文件代码如下：

html, body {
    width: 100%;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

从截图可见，<body>元素像素尺寸为1261 x 876，上方存在白边；而<html>元素尺寸同样为1261 x 876，却能覆盖整个屏幕且无白边。经检查，问题出在<body>内的子元素存在溢出padding。

解决办法 #

• 给<body>添加overflow: hidden;样式，阻止子元素的溢出padding撑开body容器：

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

• 直接修正子元素的padding值，确保其padding不会超出<body>的范围，从根源避免溢出问题。
• 给<body>和所有子元素设置box-sizing: border-box;，让元素的padding包含在自身宽高内，防止溢出：

html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: inherit;
}

内容的提问来源于stack exchange，提问作者Beantly