行内SVG为何导致设置了line-height的容器高度不符合预期？

根本原因 #

这个现象是inline级元素的默认垂直对齐规则和line-height的计算逻辑共同导致的：

1. 容器内的<svg>默认属于inline-block级替换元素，和相邻文本默认遵循vertical-align: baseline的对齐规则，即SVG的底部会和文本的基线对齐。
2. 字体本身存在固定的上升高度（ascent）和下降高度（descent），你设置的line-height: 20px是整个行框的总高度，不等于字体的em-box刚好占满20px，绝大多数系统默认字体的下降高度在3-4px左右，这部分位于基线下方的空间会把容器底部撑高，最终容器总高度就变成了20px+4px左右的24px。
3. 当你把line-height调整为30px时，行高已经大于字体的实际总高度（ascent+descent），此时行框高度完全由line-height决定，差值会作为行间距均匀分配到行框上下，不会出现额外撑高的问题。
4. 仅存在文本时高度符合预期，是因为纯文本场景下，行高与字体实际高度的差值会均匀分配到文本上下，不会出现偏移；加入inline级替换元素后，基线对齐规则会拉偏整个行的位置，导致底部多余空间暴露。

修复方案 #

任选其一即可解决问题：

• 给svg添加vertical-align: bottom/vertical-align: middle属性，直接修改对齐规则脱离基线对齐
• 给.container设置display: flex配合align-items: center，用flex布局规避行内对齐逻辑
• 给文本单独套<span>标签，单独给span设置line-height，同时给容器设置line-height: 0

修复示例代码：

.container {
  background-color: lime;
  font-size: 20px;
  line-height: 20px;
}
/* 新增对齐规则 */
svg {
  vertical-align: bottom;
}

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