时间戳

首页 > 解决方案 > 包含 SVG 的按钮的高度出乎意料

css - 包含 SVG 的按钮的高度出乎意料

问题描述

我有这个标记：

<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

标签： css

解决方案

默认情况下，SVG 是内联块元素，这意味着它们有额外的空间来容纳字符的后裔（例如 y 和 g “腿”）。

您应该能够通过将 SVG 更改为display: block.

检查这个答案的插图。

推荐阅读