SVG波浪图形下方出现无来源边距问题求助

这个空白不是margin或padding导致的，核心原因是SVG默认属于行内替换元素，浏览器渲染行内元素时，会为基线对齐预留一部分空间，这就是你看到的莫名空白。

给你几个简单的解决办法：

• 把SVG设为块级元素：直接修改CSS，给.svg添加display: block，这样就不会触发行内元素的基线对齐规则，空白会直接消失：

.svg {
  display: block;
}

• 调整SVG的垂直对齐方式：给.svg设置vertical-align: bottom（或者top/middle也可以），改变它在父元素里的对齐位置，避开基线预留的空间：

.svg {
  vertical-align: bottom;
}

• 给父元素清除字体影响：如果父元素（也就是你的.top容器）里没有需要保留的文字内容，可以给.top设置font-size: 0，行内元素的基线空间会跟着字体大小被消除：

.top {
  font-size: 0;
}
/* 注意：如果.top里有其他文字，要单独给那些文字重新设置font-size */

最推荐第一种方法，直接彻底解决问题，不会影响其他元素的布局。

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