imgタグでSVG画像を挿入した際に画像右側に謎の余白ができた。

Question

前提・実現したいこと

imgタグで読みこんだSVG画像の横にできてしまう謎の余白（画像のオレンジの部分）を消したい。
最終的には、これら４つの画像を横並びにし、左右中央に配置したい。

発生している問題・エラーメッセージ

HTMLファイルにてimgタグを用いてsvg画像を挿入した際に、謎の余白ができている。

エラーメッセージ

該当のソースコード

htmlソースコード
<div class="skill-group">
　<div class="skill-icon">
　　<img src="asset/SVG/html.svg">
　</div>
　<div class="skill-icon">
　　<img src="asset/SVG/css.svg">
　</div>
　<div class="skill-icon">
　　<img src="asset/SVG/js.svg">
　</div>
　<div class="skill-icon">
　　<img src="asset/SVG/php.svg">                            
　</div>
</div>

CSSコード
.skill-icon{
    display: block;
    width: 200px;
}

試したこと

margin: 0;を試してみたものの、解決できませんでした。

補足情報（FW/ツールのバージョンなど）

イラストレーターにて書き出したSVG画像です。
コンテンツ全体の横幅は1024pxと指定しています。

Answer 1

以下の参考リンクが分かりやすいですが、display:block;では縦並びになります。横並びにしたい場合はdisplay:inline;もしくはdisplay:inline-block;に変更してみてください。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

Comments

[t_shirakihara]

無事に解決しました。ご丁寧なお返事、ありがとうございます。