如何在CSS中完全清除页面残留的左侧边距

你之前尝试的通用边距清除样式优先级不足，也没有覆盖盒模型规则、元素默认显示属性带来的间隙问题，才会出现残留左侧边距的情况。导致边距残留的常见原因和修复方式如下：

• 全局默认样式未完全重置，且盒模型规则不统一，部分父容器的内边距/外边距未被覆盖
• 行内元素（img默认是inline/inline-block）自带的水平间隙被误认为是边距
• 更具体的选择器设置了容器的左侧边距，优先级高于你写的通用样式

第一步：全局样式统一重置 #

/* 统一所有元素的盒模型，清除默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 确保html和body铺满整个视口，隐藏横向溢出避免滚动条挤占空间 */
html, body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

第二步：针对性处理图片及父容器样式 #

如果图片直接挂载在body下：

/* 这里替换成你的图片的选择器 */
.target-img {
  display: block; /* 清除行内元素默认间隙 */
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 保持图片比例铺满窗口，无拉伸变形 */
}

如果图片放在.splash-page .main-wrap父容器内：

.splash-page .main-wrap {
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow: hidden;
}

第三步：排查高优先级样式冲突 #

如果修改后仍有边距，打开浏览器开发者工具（F12），选中存在边距的元素，在样式面板查看最终生效的margin、padding属性，找到设置该属性的对应选择器，使用相同或更高优先级的选择器将边距值覆盖为0即可。

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