SVG与section布局出现多余空白？已设margin和padding为0仍无法消除

空白区域成因 #

• 绝对定位元素脱离文档流：.hills设置了position: absolute，但父容器.first未设置position: relative，导致该SVG定位参照错误，同时绝对定位元素不参与父容器高度计算，.first的高度仅由内部<h1>元素的默认边距和内容高度撑开，和SVG高度不匹配，产生多余空白。
• 选择器匹配错误：你使用<img>标签引入SVG，却写了.underhillcontainer > svg的规则，无法匹配到img元素。img作为行内替换元素默认按基线对齐，下方会自带几像素的间隙，导致第二个section顶部出现空白。
• 标题默认边距未清除：你没有给.title类添加margin: 0规则，h1标签自带的上下默认margin会额外撑开.first容器的高度，加大空白区域。

修复方案 #

按以下内容调整你的CSS代码即可：

/* 清除h1默认边距 */
.title {
  margin: 0;
}
.first {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  /* 新增：作为子元素绝对定位的参照 */
  position: relative;
  /* 新增：设置为你的hills.svg的实际高度，保证父容器高度和SVG匹配 */
  min-height: 300px;
}
.hills {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  margin: 0;
  padding: 0;
  /* 新增：消除img默认下方间隙 */
  display: block;
}
.second {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.under-hills {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: -1;
  /* 新增：消除img默认下方间隙 */
  display: block;
}

如果不需要将h1悬浮在SVG上方，可以直接去掉.hills的position: absolute规则，让SVG正常参与父容器高度计算，不需要额外设置.first的min-height。

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