如何移除网页自定义div页脚左侧出现的多余空白间距？

问题原因 #

• 浏览器默认给<body>元素设置了默认外边距，默认值通常为8px，未重置的情况下会导致固定定位的页脚偏移
• 你给页脚设置了position: fixed但未显式声明left: 0，页脚会从文档流默认位置开始排布，叠加body的默认边距就出现了左侧空白
• 页脚设置了width: 100%，位置偏移后会导致右侧超出视口，所以你只会看到左侧有空白、右侧没有

解决方案 #

步骤1：重置默认边距 #

在CSS最顶部添加全局重置规则，消除浏览器默认样式影响：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 如果不想全局重置，也可以单独给body设置 */
body {
  margin: 0;
}

步骤2：修改页脚CSS #

删除无效属性，补充左侧对齐配置：

#footer{
  position: fixed;
  bottom: 0;
  left: 0; /* 强制与视口左侧对齐，消除偏移 */
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: black;
  /* 删除原代码里无效的 display: table、float: left，固定定位不需要这两个属性 */
}

可选调整 #

你当前给所有页脚内的<a>标签设置了margin-left: 50px，如果不需要第一个链接左侧也有50px的间距，可以补充如下规则：

#footer a:first-child {
  margin-left: 0;
}

额外提醒 #

你提供的HTML代码中，页脚的闭合标签写反了，最后一个<div>要改成</div>，避免标签不闭合引发其他布局异常。

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