我有以下 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
,但我不知道它做了什么,删除它也没有任何作用。
最佳答案
保存 svg 时,您需要确保您的作品包含整个 Canvas 板,以便最终图像中没有空白。
http://healthbenefitsohio.com/images/svg_whitespace.jpg
根据上图,顶部、左侧和底部会有额外的间距,这会导致一些尴尬的间距。
http://healthbenefitsohio.com/images/svg_nospace.jpg
上图显示了保存 svg 的正确方法,并防止在将图像用于网络时出现不必要的间距。
我很高兴能帮上忙,祝你的设计伙伴好运!
关于HTML 按钮元素 - 内部的 svg 图像 - 奇怪的间隙和定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19623650/