如何去除背景图片周围的多余边框？附相关HTML与CSS代码

• 外边距折叠：浏览器默认给<p>等块级元素设置了上下外边距，该外边距会和父元素.bg的外边距发生折叠，最终透到外层，表现为背景图周围出现多余空白，容易被误认为是边框。
• 缺失全局盒模型统一声明：未显式设置box-sizing: border-box时，部分场景下元素的边框、内边距会额外占据视口空间，也可能导致背景图无法完全铺满视口。

方案1：直接修改现有代码，仅调整CSS即可 #

不需要改动HTML，仅修改CSS就能解决问题：

/* 全局统一盒模型、清除默认内外边距，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  color: #cccccc;
  text-align: center;
}

.bg {
  background-image: url("bg.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 触发BFC，避免子元素外边距折叠透出，也可以单独给内部p标签设置margin: 0实现相同效果 */
  overflow: auto;
}

方案2：更简洁的无冗余标签实现（无需额外.bg容器） #

直接把背景图挂载在body标签上，代码量更少，从根源上避免子元素外边距折叠问题：

简化后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon"/>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>xx</title>
  </head>
  <body>
    <p>content</p>
  </body>
</html>

对应的CSS代码 #

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

body, html {
  height: 100%;
}

body {
  color: #cccccc;
  text-align: center;
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 如需背景固定不随页面滚动，可开启下面的配置 */
  /* background-attachment: fixed; */
}

如果调整代码后仍有多余边框，可检查背景图bg.jpg本身是否自带空白边框。

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