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