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

Question

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

Answer 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>

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

Inline SVG increases height of parent element - why and how to prevent it?

html

css

fonts

svg