0

我想弄清楚如何在文本和图像之间留出空间。到目前为止，我已经尝试了所有我学到的东西，包括字间距、填充。

让我给你看一张图片，它会让你更好地理解我想要实现的目标。 例子 我想增加图像和文本之间的空间。突出显示为黄色。如何使用此示例代码实现它？链接到 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;
}
4

2 回答 2

1

如果我理解你的问题.....我只会在你想要的空间的#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
}
于 2016-10-15T20:04:20.050 回答
1

我认为给 img 一个左右边距应该是最好的解决方案。实现此目的的最简单方法：

#logo img {
  height: 66px;
  margin: auto 20px;
}
于 2016-10-15T20:05:19.207 回答