HTML按鈕元素 - SVG圖像內 - 奇怪的差距和定位

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

而這個CSS：

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

當我檢查按鈕使用Firebug我可以看到，圖像和按鈕邊框之間仍然存在某種奇怪的間隙。無論如何刪除這個？我希望圖像儘可能多地填寫按鈕，或者至少應該居中。

下面是截圖： enter image description here

或者，也許它的東西與SVG文件？這是SVG代碼，潛移默化地影響着定位：

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

什麼打動我是enable-background，但我不知道它做什麼&刪除它什麼也沒做。

2013-10-27 Sven

你有沒有在線的SVG圖像？ –

@OlafDietsche當然，它是Adam Whitcroft的「Batch」圖標集的菜單圖標。我把它粘貼到這裏：http://jsfiddle.net/WhLDT/（注意我在調試時如何將48px改爲48px）。 – Sven

當你保存你的svg文件時，你是否在畫布上保存了空白區域，還是僅包含圖標和其他內容的畫布大小？ –

保存svg時，您需要確保您的作品包含整個畫布板，以便在最終圖像中沒有空白區域。

基於上面的圖片，你會在上面多餘的空格，左，下，這將導致一些尷尬的間距。

上面的圖像顯示了適當的方式來保存的SVG和防止不必要的間距當您使用圖像的網頁。

我很高興我能在你的設計伴侶中提供幫助並祝你好運！

2013-10-28 13:49:37

回答