为何无外边距的SVG与div之间会出现5px间隙？

我给SVG和div元素都设置了margin为0，容器里也没有空白字符，但它们之间还是出现了5px左右的间隙：

现有代码 #

CSS代码：

.box {
  height:100px;
  background-color:#00cba9;
  margin:0;  
}

svg{
  padding-bottom:0;
  margin-bottom:0;
  border:solid red 3px;
}

HTML代码：

<div class="wrapper">
  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg><div class="box"></div>
</div>

我试过用flex布局可以消除这个间隙：

.wrapper{  
  display:flex;  
  flex-direction: column;
}

间隙产生的核心原因 #

这个间隙是行内元素的基线对齐特性导致的：

• SVG默认属于置换行内元素，在常规文档流中会遵循文本的基线对齐规则。
• 文本基线下方会预留一部分空间（用于容纳g、y这类带下沉部分的字母），这个空间大小由父元素的font-size和line-height决定，也就是你看到的5px左右的间隙。
• 即便容器内没有文本，浏览器仍会为行内元素保留这部分基线下方的空间，最终导致SVG和下方div之间出现间隙。

flex布局能解决问题，是因为flex容器内的子元素会采用flex对齐规则，不再遵循常规文档流的基线对齐逻辑，自然消除了这部分预留空间。

其他可行的解决方法还包括：

• 给SVG设置display: block，脱离行内元素的基线对齐规则
• 给父容器设置font-size: 0，消除基线下方的预留空间
• 给SVG设置vertical-align: bottom，强制对齐到容器底部，跳过基线预留空间

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