SVG与Div间莫名间隙的成因及消除方法

问题重现代码 #

CSS：

svg {
  background-color: blue;
}
div {
  background-color: green;
}
svg, div {
  width: 100%;
  height: 100px;
}

HTML：

<svg></svg>
<div></div>

显示效果：

间隙成因 #

SVG元素默认是inline-block（行内块级元素），浏览器渲染行内块元素时，会遵循文本排版的基线对齐规则——为了容纳字母的下伸部分（比如g、y的底部），会在元素下方预留一小段空间（高度由父元素的font-size决定）。而div是块级元素，默认独占一行，不受这个文本排版规则影响，所以换成两个div就不会有间隙。

解决方法 #

以下几种方法都能消除这个间隙：

• 将SVG设为块级元素：直接改变SVG的显示模式，脱离行内排版规则，是最直接的解决方案。修改后的CSS：

svg {
  background-color: blue;
  display: block; /* 添加该行 */
}
div {
  background-color: green;
}
svg, div {
  width: 100%;
  height: 100px;
}

• 设置父元素字体大小为0：压缩浏览器预留的基线空间，不过如果父元素内有其他文本内容，需要单独给文本重新设置font-size：

.parent { /* 假设父元素类名为parent */
  font-size: 0;
}
.parent svg, .parent div {
  font-size: 16px; /* 恢复元素自身的字体大小（如果需要） */
}

• 调整SVG的垂直对齐方式：让SVG对齐到文本底部，避免预留空间：

svg {
  background-color: blue;
  vertical-align: bottom; /* 添加该行 */
}

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