如何在HTML和CSS中设置body元素占满整个屏幕尺寸

问题根本原因 #

你代码中写的margin: none、padding: none属于无效CSS属性值，浏览器会直接忽略这两条规则，因此浏览器默认给body设置的8px外边距仍然生效，这就是出现偏移的核心原因。你之前设置绝对定位left:0、top:0没效果，也是因为默认margin还在，会把元素往右下角推对应距离。

解决方法 #

把无效的none值替换为合法的0即可，不需要额外设置绝对定位，修改后的代码如下：

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    border: 2px solid red;
}

补充排查方向 #

如果修改后仍然存在偏移，可以按以下顺序排查：

• 检查是否有其他全局CSS规则覆盖了body的margin、padding属性
• 检查HTML根元素html是否被设置了额外的边距或内边距

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