如何消除页脚与网页左侧的间隙？页脚全屏宽度实现方案

看起来你遇到的是浏览器默认样式和定位细节导致的小问题，几步就能搞定：

核心问题分析 #

大部分现代浏览器会给 <html> 和 <body> 标签设置默认的 margin（通常是8px），这会让你的固定定位页脚看起来和页面边缘有间隙。另外，全局未统一 box-sizing 也可能导致元素尺寸计算不符合预期，间接放大了这个问题。

修复方案 #

我会修改你的CSS代码，添加必要的重置和定位属性，同时简化冗余代码：

完整修改后的CSS代码 #

/* 全局样式重置：清除浏览器默认边距 */
html, body {
  margin: 0;
  padding: 0;
}

/* 全局统一盒模型：确保元素宽度包含padding和border */
* {
  box-sizing: border-box;
}

.options { 
  height: auto; 
  max-height: 313px; 
  max-width: 750px; 
  width: auto; 
  padding-top: 150px; 
  padding-bottom: 50px; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  margin-left: auto; 
  margin-right: auto; 
}

.button { 
  background-color: rgb(226, 226, 226); 
  height: 418.75%; 
  width: auto; 
  padding: 21px 25px 22px 25px; 
  border-radius: 5px; /* 简化圆角写法 */
  cursor: pointer; 
  font-size: 14px; 
  line-height: 16.8px; 
  display: block; 
  position: relative; 
}

.button:hover, #backward:hover, #forward:hover { 
  background-color: rgb(212, 21, 27); 
  color: white; 
}

.button-bar { 
  position: fixed; 
  bottom: 0; 
  left: 0; /* 强制贴合视口左侧 */
  right: 0; /* 强制贴合视口右侧，比单纯width:100%更可靠 */
  display: flex; 
  margin-top: auto; 
}

.nav-inner { 
  cursor: pointer; 
  width: 50%; 
  text-align: center; 
  line-height: 83px; 
}

#backward { 
  background-color: rgb(101, 93, 93); 
  color: white; 
}

#forward { 
  background-color: rgb(191, 191, 191); 
}

关键修改点说明 #

• 全局重置：html, body { margin:0; padding:0; } 直接清除浏览器自带的默认边距，这是解决间隙的核心。
• 统一盒模型：* { box-sizing: border-box; } 让所有元素的宽度计算包含内边距和边框，避免出现尺寸溢出或错位的情况。
• 优化页脚定位：给 .button-bar 添加 left:0 和 right:0，代替单纯的 width:100%，能更可靠地让页脚贴合视口左右边缘，不受任何默认样式影响。
• 简化代码：把四个圆角属性合并成 border-radius:5px，让代码更简洁易维护。

验证效果 #

修改后你的页脚应该能完全横向铺满页面，左右没有任何间隙。如果还有问题，可以检查是否有其他父元素设置了 padding 或 margin，但按照上面的修改，绝大多数情况都能解决问题。

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