0

テキストと画像の間にスペースを作る方法を見つけようとしています。単語の間隔、パディングなど、これまでに学んだことはすべて試しました。

私が達成したいことをよりよく理解していただけるような写真をお見せしましょう。 例 画像とテキストの間のスペースを増やしたい。黄色で強調表示されます。このサンプルコードを使用してそれを達成するにはどうすればよいですか? コードペンへのリンク

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 に答える