html - HTML 按钮元素 - 内部的 svg 图像 - 奇怪的间隙和定位

Question

我有以下 HTML：

<button class="button">
  <img src="img/menu-2.svg">
</button>

这个CSS：

.button {
    padding: 0;
    height: 44px;
    border: none;
    background: none;
}

当我用 Firebug 检查按钮时，我可以看到图像和按钮边框之间仍然存在某种奇怪的间隙。有没有办法删除这个？我希望图像尽可能地填充按钮，或者至少居中。

这是一个屏幕截图：在此处输入图像描述

或者它可能与 SVG 文件有关？这是应该影响定位的 SVG 代码：

x="0px" y="0px" width="44px" height="44px" viewBox="0 0 44 44" enable-background="new 0 0 16 16"

令我印象深刻的是enable-background，但我不知道它做了什么，删除它什么也没做。

score 1 · Accepted Answer

保存 svg 时，您需要确保您的作品包含整个画布板，以便最终图像中没有空白。

根据上图，顶部、左侧和底部会有额外的间距，这会导致一些尴尬的间距。

上图显示了保存 svg 并防止在将图像用于 Web 时出现不必要的间距的正确方法。

我很高兴能为您的设计伙伴提供帮助并祝您好运！

1 回答 1