渐变过渡间隔条宽度与下方文本不一致的问题及解决

问题根源 #

你的.spacer是默认块级元素，会占满父容器（.body）的宽度，但.h1通过左右margin缩小了自身宽度，导致两者宽度不一致。

方案一：直接同步margin（快速修改） #

给.spacer设置和.h1完全相同的左右margin，同时用height替代<br>来控制渐变条高度，避免排版混乱：

修改后的CSS：

.body {
  font-family: "Roboto", "Arial", "Helvetica", "sans-serif";
  max-width: 1200px;
  background-color: #26BFBF;
  margin: 0 auto; /* 可选：让内容块居中，优化视觉效果 */
}

.toplogo {
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.h1 {
  background-color: #ffffff;
  font-size: 20px;
  color: #262626;
  margin: 0 40px 0 60px;
  text-align: center;
  padding: 10px 0; /* 可选：给文本加内边距，避免贴边 */
}

.spacer {
  background-image: linear-gradient(#26BFBF, #ffffff);
  height: 20px; /* 用height控制渐变条高度，替代<br> */
  margin: 0 40px 0 60px; /* 和H1同步左右margin，保证宽度一致 */
}

修改后的HTML（移除多余的<br>>）：

<body class="body" bgcolor="#ffffff">
  <div class="toplogo" align="center">
    <a href="xxx" target="_blank">
      <img class="light-img" src="xxx" alt=""> </a>
  </div>

  <div class="spacer"></div>

  <div class="h1">
    Newly published material
  </div>
</body>

方案二：用容器统一控制（更易维护） #

把spacer和h1放入同一个容器，给容器设置左右margin，内部元素自动继承宽度，后续调整边距只需修改容器样式：

修改后的CSS：

.body {
  font-family: "Roboto", "Arial", "Helvetica", "sans-serif";
  max-width: 1200px;
  background-color: #26BFBF;
  margin: 0 auto; /* 可选：内容块居中 */
}

.toplogo {
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.content-container {
  margin: 0 40px 0 60px; /* 统一控制左右边距 */
}

.h1 {
  background-color: #ffffff;
  font-size: 20px;
  color: #262626;
  text-align: center;
  padding: 10px 0;
  margin: 0; /* 移除原margin，改用容器的margin */
}

.spacer {
  background-image: linear-gradient(#26BFBF, #ffffff);
  height: 20px;
  margin: 0; /* 移除原margin，改用容器的margin */
}

修改后的HTML：

<body class="body" bgcolor="#ffffff">
  <div class="toplogo" align="center">
    <a href="xxx" target="_blank">
      <img class="light-img" src="xxx" alt=""> </a>
  </div>

  <div class="content-container">
    <div class="spacer"></div>
    <div class="h1">
      Newly published material
    </div>
  </div>
</body>

效果说明 #

两种方案都能让渐变条宽度和H1完全匹配，且随屏幕尺寸自适应——当.body的宽度因屏幕缩小而变化时，spacer和h1的宽度会同步调整。

内容的提问来源于stack exchange，提问作者new-to-snake