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

【问题标题】：Inline SVG increases height of parent element - why and how to prevent it?内联 SVG 增加了父元素的高度 - 为什么以及如何防止它？
【发布时间】：2021-03-15 16:38:21
【问题描述】：

我在 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>

然后，我将图标放置在稍低的位置，以便使用相对定位与文本很好地对齐。

h1 {
    font-size: 64px;
}

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

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

这一切都有效，但在 1em 的高度，svg 增加了它的父元素的height。

这是没有svg 的h1：

这是包含svg：

相差5px。

当我将高度更改为例如.9em，这不会发生。

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

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

代码笔：https://codepen.io/denobelsoftware/pen/MWjKKXO

let iconsHidden = false;
const elements = document.querySelectorAll(".icon");

document.querySelector("#hide-icons").addEventListener('click', function(event) {
  for (var i = 0; i < elements.length; i++) {
    if(iconsHidden){
      elements[i].classList.add('hidden');
    } else elements[i].classList.remove('hidden');
}
  iconsHidden = !iconsHidden;
});

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

h1 {
    font-size: 64px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    position: relative; /* for the rulers */
}

.icon {
  position: relative;
  top: 0.14453125em;
}

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

h1:after{
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0.244140625em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}

h1:before{
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0.955078125em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}

.hidden {
  display: none;
}

<body>
    <h1>
        64px ABC
        <span class="icon">
            <svg width="64" height="64" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect id="block" x="4" y="4" width="56" height="56" rx="16" ry="16" stroke-width="1" />
            </svg> 
        </span>
        xyz
    </h1>

    <h1>
        64px ABC
        <span class="icon">
            <svg width="64" height="64" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect id="block" x="4" y="4" width="56" height="56" rx="16" ry="16" stroke-width="1" />
            </svg>
        </span>
        xyz
    </h1>

    <input type="checkbox" id="hide-icons">
    <label for="hide-icons"> Hide icons</label>
</body>

【问题讨论】：

标签： html css svg fonts

【解决方案1】：

创建跨度display:inline-block 并添加vertical-align:top 以避免默认的基线对齐，这将使行框变大然后还使用line-height:0 以确保内部的svg 不会影响其大小。那么您可能需要重新调整顶部值：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

h1 {
    font-size: 64px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    position: relative; /* for the rulers */
}

.icon {
  position: relative;
  top: 0.14453125em;
  display:inline-block;
  vertical-align:top;
  line-height:0;
}

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

h1:after{
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0.244140625em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}

h1:before{
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0.955078125em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}

.hidden {
  display: none;
}

<body>
    <h1>
        64px ABC
        <span class="icon">
            <svg width="64" height="64" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <rect id="block" x="4" y="4" width="56" height="56" rx="16" ry="16" stroke-width="1" />
            </svg> 
        </span>
        xyz
    </h1>

    <h1>
        64px ABC

        xyz
    </h1>

    <input type="checkbox" id="hide-icons">
    <label for="hide-icons"> Hide icons</label>
</body>

【讨论】：

谢谢，这避免了更大的线框。它还使 h1 中的文本垂直对齐到顶部，这应该保持基线。你有办法避免这种情况吗？
@RNobel 如何使 h1 与顶部对齐？如您所见，两个示例完全相同（带有和不带有图标）
当您打开开发工具并禁用 vertical-align: top; 时，您会看到文本向下移动
@RNobel 这正是你的问题。文本向下移动是因为跨度在底部创建了更多空间，因此它需要在顶部有更多空间才能放置在行内。这个空间是让你的 linebox 变大的罪魁祸首。文本没有移动，基线没有改变，跨度正在发挥作用
@RNobel 如果您愿意，我围绕该主题写了一些答案：stackoverflow.com/a/55978512/8620333 / stackoverflow.com/a/64959101/8620333 / stackoverflow.com/a/63319772/8620333