如何让h1元素背景延伸至屏幕边缘？

你当前的问题是标题的灰色背景无法触达屏幕左右边缘，核心原因是body元素默认带有margin值，同时html/body的默认padding也可能干扰布局。以下是两种实用的解决方法：

方法一：重置全局默认边距（推荐） #

通过清除html和body的默认margin、padding，让标题作为块级元素自动占满父容器宽度：

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0; /* 移除body默认margin */
  padding: 0; /* 移除body默认padding */
}

h1 {
  background-color: #4f5d75;
  margin: 0;
  padding: 1rem 0; /* 添加上下内边距提升可读性 */
  text-align: center;
}

html {
  margin: 0;
  padding: 0; /* 确保html无默认padding */
}

<h1>Heading level 1</h1>

方法二：视口宽度适配（适配特殊布局） #

如果无法重置body边距，可通过视口宽度和负边距强制标题背景铺满屏幕：

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

h1 {
  background-color: #4f5d75;
  margin: 0 calc(-50vw + 50%); /* 抵消body默认边距，实现左右铺满 */
  padding: 1rem 0;
  text-align: center;
}

html {
  margin: 0;
}

关键说明 #

• 块级元素（如h1）默认宽度为父元素的100%，只要父容器（body）没有边距，标题背景自然会延伸到屏幕边缘。
• 你之前用width属性出现问题，是因为直接设置固定宽度会破坏文本的自然布局，正确做法是利用块级元素的默认特性，或通过视口单位+负边距适配。

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