イメージの周りの空白を削除するにはどうすればよいですか？

Question

この画像をナビゲーションバーの一部として使用しようとしていますが、画像の周りに大きな空白があり、削除できないという問題があります。私はmarginとpaddingを0に設定しようとしましたが、動作しません。

これは、それがどのように見えるかです：

UPDATE：HTML & CSSコード

HTML

CSS

2ND UPDATE

私はついに問題の人たちを解決しました。皆助けてくれてありがとう！

Answer 1

あなたはCSSを使用してこのように、background-size & background-positionプロパティで遊ぶことができます：

div.image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('https://i.stack.imgur.com/sOO9j.png'); 
 
    background-size: 700px 700px; 
 
    background-position: 419px 438px; 
 
    border: 1px solid red; 
 
}

<div class="image"></div>

私はあなたの元の画像をトリミングしていることを使用していたGimpの画像エディタを使用したとして、代わりに背景ですが、これは次のようになります：

div.image { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('https://i.stack.imgur.com/MaYMF.png'); 
 
    background-size: 120%; 
 
    background-position: 112px 115px; 
 
    border: 1px solid red; 
 
}

<div class="image"></div>

あなたは上記提供された画像は、あなたがそれをトリミングする場合、トリミングされた画像は、低品質の画像になることを意味し、あまりにも大きいです。 Gimp Image EditorやPhotoshopのようなソフトウェアを使って自分のイメージを自分のものに変更して、ピクセルに近づけたい特定のイメージを手に入れたら、私のCSSを単純化すると

div.image { 
    width: 100px; 
    height: 100px; 
    background-image: url('https://i.stack.imgur.com/sOO9j.png'); 
    background-size: 100% 100%; 
    background-position: center center; 
    border: 1px solid red; 
} 

注：赤い枠は画像がどこにあるの見え方を支援するために使用されます。
注：：この作業を行うには、赤い枠線がではなく、である必要があります。

Answer 2

画像を切り抜くことができます。それ以外の場合は、CSSを使用することができます。例えば

：

<style> 
    img { 
     position: absolute; 
     clip: rect(0px,60px,250px,10px); 
    } 
</style>