是什么影响了内联元素实际渲染的内部尺寸？

Question

我正在尝试了解什么与按钮的实际内部高度相关。

我希望下面的两个按钮具有相同的 32px 高度，尤其是相同的 20px 内部高度。

这些是样式和标记：

<style>
button {
    font-size: 16px;
    line-height: 1.25;
    padding: 5px;
    border: 1px solid grey;
}

svg {
    width: 20px;
    height: 20px;
}
</style>
<button>Button with text</button>
<button>
  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path d="..."></path>
  </svg>
</button>

https://jsfiddle.net/6sxb4zof/1/

纯文本按钮的行为符合预期：它的实际内部高度为 20 像素，等于其行高。

但是如果我用 20px 替换那个文本 <svg>，突然内部高度是 25px。

这是怎么回事？这里的渲染逻辑是如何工作的？

Answer 1

（取决于字体设置）SVG 下方有一个排水沟，以允许所有需要 space 的字母位于基线下方：pqyj

a vertical-align:top 摆脱不需要的 space

<style>
  button {
    line-height: 1.25;
    font-size: 16px;
    padding: 5px;
    border: 1px solid grey;
  }

  svg {
    width: 20px;
    height: 20px;
    vertical-align: top;
  }

</style>

<button>Button with text</button>
<button><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="m170 20h-35l-10-10h-50l-10 10h-35v20h140v-20zm-130 150c0 5 2 10 6 14c4 4 9 6 14 6h80c5 0 10-2 14-6c4-4 6-9 6-14v-120h-120v120z"></path>
  </svg></button>

是什么影响了内联元素实际渲染的内部尺寸？

What influences the actually rendered inner size of an inline element?

html

css

svg

html-rendering