Html 内联SVG增加父元素的高度-为什么以及如何防止？

我在

h1

中包含一个

svg

元素，如下所示：

<h1>
    64px ABC
    <span class="icon">
        <svg width="64" height="64" viewBox="0 0 64 64">
            <rect id="block" x="4" y="4" width="56" height="56" rx="16" ry="16" stroke-width="1" />
        </svg> 
    </span>
    xyz
</h1>

这一切都是可行的，但当高度为1em时，

svg

会增加其父元素的

高度

这是不带svg的
h1
：


这包括了
svg
：


相差5px

当我将高度更改为例如…9em时，不会发生这种情况

我尝试了许多不同的选项，但没有达到预期的效果——保持父元素的高度不变

为什么会发生这种情况？我们如何确保不会发生这种情况

代码笔：


让iconhidden=false；
const elements=document.queryselectoral（“.icon”）；
document.querySelector（“隐藏图标”）.addEventListener（“单击”，函数（事件）{
对于（var i=0；i
@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@100；300；400；500；700&display=swap'）；
h1{
字体大小：64px；
字体系列：“Roboto”，无衬线；
字体大小：正常；
位置：相对；/*用于标尺*/
}
.图标{
位置：相对位置；
顶部：0.14453125em；
}
svg{
高度：1米；
填充：当前颜色；
}
h1：之后{
宽度：100%；
高度：1px；
内容：“；
位置：绝对位置；
底部：0.244140625em；
左：0；
背景色：rgba（255,0,0,0.23）；
z指数：-100；
}
h1：之前{
宽度：100%；
高度：1px；
内容：“；
位置：绝对位置；
底部：0.955078125em；
左：0；
背景色：rgba（255,0,0,0.23）；
z指数：-100；
}
.隐藏{
显示：无；
}

64px ABC
xyz
64px ABC
xyz
隐藏图标
使span
显示：内联块
并添加
垂直对齐：顶部
以避免默认基线对齐，这会使线框变大，然后还使用
线高度：0
以确保内部svg不会影响其大小。然后可能需要重新调整最大值：


@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@100；300；400；500；700&display=swap'）；
h1{
字体大小：64px；
字体系列：“Roboto”，无衬线；
字体大小：正常；
位置：相对；/*用于标尺*/
}
.图标{
位置：相对位置；
顶部：0.14453125em；
显示：内联块；
垂直对齐：顶部；
线高：0；
}
svg{
高度：1米；
填充：当前颜色；
}
h1：之后{
宽度：100%；
高度：1px；
内容：“；
位置：绝对位置；
底部：0.244140625em；
左：0；
背景色：rgba（255,0,0,0.23）；
z指数：-100；
}
h1：之前{
宽度：100%；
高度：1px；
内容：“；
位置：绝对位置；
底部：0.955078125em；
左：0；
背景色：rgba（255,0,0,0.23）；
z指数：-100；
}
.隐藏{
显示：无；
}

64px ABC
xyz
64px ABC
xyz
隐藏图标
谢谢，这样可以避免使用更大的接线盒。它还使h1垂直方向上的文本与顶部对齐，顶部应保持基线。你看到避免这种情况的方法了吗？@RNobel它是如何使h1与顶部对齐的？正如您所看到的，当您打开开发工具并禁用
vertical align:top您将看到文本移动down@RNobel这正是你的问题。文本向下移动是因为跨度在底部创造了更多的空间，因此需要在顶部留出更多的空间才能放置在线条内部。这个空间是使你的接线盒变大的罪魁祸首。文本未移动，基线未更改，跨度正在使difference@RNobel如果你愿意的话，我围绕这个主题写了一些答案：//
h1 {
    font-size: 64px;
}

.icon {
  position: relative;
  top: 0.14453125em; /* Calculated using https://seek-oss.github.io/capsize/ */
}

svg {
  height: 1em;
  fill: currentColor;
}