如何移除整个网页四周的多余空白边距

问题排查&解决步骤 #

• 第一步：先清除浏览器默认样式
  在你的CSS代码最顶部加入这段重置代码，消除所有元素默认的内外边距，同时统一盒模型计算规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

盒模型设为border-box后，元素的内边距、边框都会被包含在你设置的宽度内，不会因为加padding就撑宽元素导致溢出。

• 第二步：添加移动端适配必要的viewport元标签
  检查你HTML的<head>标签里有没有这行代码，没有的话加上，否则移动端浏览器会默认用PC端的宽度渲染页面，必然出现横向滚动条和空白：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 第三步：排查溢出的子元素
  如果上面两步做完还有问题，说明你页面里有某个元素的宽度超出了当前视口宽度，可以临时在CSS里加这段代码，给所有元素加上红色边框，就能直接看到哪个元素越界了：

* {
  outline: 1px solid red;
}

常见的溢出场景：

• 给元素设置了固定宽度（比如width: 1200px），超出了小屏幕的视口宽度，换成max-width: 1200px就能自适应
• 用了width: 100vw，100vw会把滚动条的宽度算进去，导致横向溢出，换成width: 100%即可
• 子元素设置了过大的左右外边距、或者负的左右边距，把元素撑到了视口外
• 第四步：临时应急方案
  如果暂时找不到溢出元素，可以直接给body加横向溢出隐藏，直接截断超出视口的内容：

body {
  overflow-x: hidden;
}

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