xeho91 xeho91 - 1 month ago 5
CSS Question

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

I am trying to figure out how to make a space between text and image. I've tried everything I learned so far, including word spacing, padding.

Let me show you picture which will give you a better understanding of what I want to achieve.
example
I want to increase space between the image and the text. Highlighted as yellow.
How can I achieve it using this example code? 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

I think giving the img a left/right margin should be the best solution. Easiest way to accomplish this:

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