如何去除section元素CSS background-image周围多余的白色边框

云上老周

2026-8-26

问题根因

白边和section自身样式无关，是浏览器默认渲染规则导致的：

所有浏览器内置的User Agent样式表默认给body元素设置了8px外边距，section作为普通块级子元素，布局起点是body的内容区边缘，因此会被这8px边距挤开，四周露出body默认的白色背景。
把背景设到body上时白边消失，是因为CSS规范有特殊处理：当根元素html未设置背景时，body的背景会被直接绘制到整个视口画布上，自动覆盖body默认margin的空隙，这个特殊规则仅对body/html生效，section这类普通元素无法触发。

修复方案

原有section的样式不需要改动，只需要提前重置根元素的默认边距即可：

必加项：清除html、body的默认内外边距

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

推荐项：添加全局盒模型规则，避免后续其他元素出现同类边距异常

* {
  box-sizing: border-box;
}

原有section代码可直接保留使用，添加上述规则后背景会完全铺满section区域，四周无白边：

section {
  min-height:100vh; 
  width:100%; 
  margin:0; 
  padding:0; 
  border:0;
  background-image: url(https://images.squarespace-cdn.com/content/v1/54e7a1a6e4b08db9da801ded/7f2dae36-5650-4b84-b184-684f46fe68aa/98.jpg?format=750w);
  background-position: center center;
  background-repeat:no-repeat;
  background-size: cover;
  position:relative;
}