href要素内のimgとtextの間のスペースを増やします（単語の間隔？padding？）

Question

テキストと画像の間にスペースを入れる方法を考えています。私は単語の間隔、詰め物を含め、これまでに学んだことをすべて試しました。

あなたが私が達成したいことをよりよく理解できるように、あなたの写真を見せてください。 イメージとテキストの間のスペースを増やしたいと考えています。黄色で強調表示されます。 このサンプルコードを使用してどのように達成できますか？ Link to CodePen

HTML

<div class="navbar-header"> 
    <div class="container"> 
    <div id="logo"> 
     <a href="#"> 
     Amazing <img src="http://www.clipartkid.com/images/650/image-spiderman-logo-png-spider-man-wiki-wikia-hYo1XM-clipart.png"/> Spiderman 
     </a> 
    </div> 
    </div> 
</div> 

CSS

.navbar-header { 
    border-bottom: 1px solid black; 
    height: 70px; 
    margin-bottom: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 100; 
} 

.container { 
    align-items: center; 
    display: flex; 
    flex-direction: row; 
    height: 100%; 
    width: 100%; 
} 

#logo { 
    align-items: center; 
    margin: auto; 
} 

#logo a { 
    align-items: center; 
    color: black; 
    display: flex; 
    flex-grow: 2; 
    margin: auto; 
    text-decoration: none; 
    word-spacing: 200px; 
} 

#logo img { 
    height: 66px; 
    margin: auto; 
} 

Answer 1

私は左/右マージンを与えることが最良の解決策であるべきだと思う。

#logo img { 
    height: 66px; 
    margin: auto 20px; 
} 

Answer 2

私はあなたの質問を理解していれば.....私はちょうど約の#logoのIMGに左右のマージンを追加しますあなたが望むスペース

#logo img { 
    height: 66px; 
    margin: auto; 
    /*you would want to change this, so as to not have both declarations, I just dont know how much top and bottom margin you want*/ 
    margin-left: 15px; 
    margin-right: 15px 
}