在 href 元素内的 img 和文本之间增加 space（字间距？。填充？）

Question

我想弄清楚如何在文本和图像之间制作 space。我已经尝试了到目前为止所学的一切，包括字间距、填充。

让我给你看一张图片，这会让你更好地理解我想要实现的目标。我想在图片和文字之间增加space。突出显示为黄色。如何使用此示例代码实现它？ 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

如果我理解你的问题.....我会在你想要的space

的#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
}

Answer 2

我认为给 img 一个 left/right 边距应该是最好的解决方案。完成此操作的最简单方法：

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

在 href 元素内的 img 和文本之间增加 space（字间距？。填充？）

Increase a space between img and text inside a href element (word spacing?. padding?)

css

padding

word-spacing