使用SVG制作波浪背景过渡效果时与下方div出现异常间隙

问题根因 #

该间隙和Bootstrap无关，是SVG作为行内替换元素的默认布局特性导致：浏览器默认会将行内元素（包括svg、img等替换元素）按照文本基线对齐，底部会预留出对应英文字母下行部分的空白，因此不会在盒模型的margin/padding属性中体现，难以通过检查器直接定位。

解决方案 #

可任选以下任意一种方案修复：

• 方案1：给SVG元素添加display: block样式，将其转为块级元素，直接消除行内元素基线对齐带来的默认空白，是最推荐的通用方案。
• 方案2：给SVG元素设置vertical-align: bottom或vertical-align: top，手动修改行内元素的对齐规则，取消基线预留的间隙。
• 方案3：给SVG的直接父容器设置font-size: 0，但需要注意该属性会继承到子元素，如果父容器内还有其他文本内容，需要单独给文本元素重置字体大小，适用场景有限。

你之前写在path标签上的line-height、font-size等样式属于无效属性，对外部布局没有影响，可以直接删除。

修正后代码示例 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="display:block;width:100%;">
  <path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"></path>
</svg>
<footer style="padding-bottom:6px;">
  <div style="text-align: center;color: white;background-color: #36393D;padding-top:20px">

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