css - 包含 SVG 的按钮高度意外

Question

我有这个标记:

<p style="background-color: #000">
    <button>
        <svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 43.42 43.42">
            <path d="M21.71,43.42A21.71,21.71,0,1,1,43.42,21.71,21.73,21.73,0,0,1,21.71,43.42ZM21.71,2A19.71,19.71,0,1,0,41.42,21.71,19.73,19.73,0,0,0,21.71,2Z" style="fill: rgb(255, 255, 255);"></path>
        </svg>
    </button>
</p>

我希望按钮不大于它包含的 25x25 SVG。

button {
  background: transparent;
  border-width: 0;
  padding: 0;
}

按钮的宽度是正确的，但是计算出的高度是 28px，我不知道这 3 个额外的像素是从哪里来的。

https://codepen.io/anon/pen/oyrRbM

Answer 1

默认情况下，SVG 是行内 block 元素，这意味着它们有额外的空间来容纳字符下行(例如 y 和 g“腿”)。

您应该能够通过将 SVG 更改为 display: block 来获得所需的行为。

检查 this答案的插图。