I have 3 images with text next to it (Social media). And I want the text have a different padding or margin so it is in the center of the image. But when I use one of these, the images are going higher as well. I think this is because they all have display: inline-block;.

This is the html code;

    <footer>
        <div id="socialIcon"><img src="images/media/telefoon.png" width="30"></div>
        <div id="socialText">06-123456</div>
        <div id="socialIcon"><img src="images/media/mail.png" width="30"></div>
        <div id="socialText">[email protected]</div>
        <div id="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/"><img src="images/media/instagram.png" width="30px"</a></div>
        <div id="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
    </footer>

This is the css code:

footer {
    background: #222222;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    font-family: proxima-nova, sans-serif;
    text-align: center;
    font-size: 20px;
}
#socialText{
    display: inline-block;
    margin-bottom: 10px;

}
#socialIcon{
    display: inline-block;
    margin-left: 10px;
    margin-right: 3px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    height: 30px;
}

But right now not only the socialText goes 10px up, the socialIcon as well.

2 Answers

0
SaschaM78 On

One of your problem will be caused by the missing closing bracket in the <img src="images/media/instagram.png" width="30px" line that causes the next opening tag to be interpreted as part of the previous (unclosed) HTML tag. All following opening and closing tags will then be interpreted incorrectly e.g. the closing </div> does not fit the opening <a> tag that came before the <img>.

Besides that you should set:

img {
  vertical-align: middle;
}

to have other containers align with your images in the vertical middle.

As mentioned by BugsArePeopleToo please do not use duplicate IDs, use CSS classes instead. Here's a snippet of the changed code:

footer {
  background: #666;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
  font-family: proxima-nova, sans-serif;
  text-align: center;
  font-size: 20px;
  padding: 5px;
}

.socialText {
  display: inline-block;
}

.socialIcon {
  display: inline-block;
  margin-left: 10px;
  margin-right: 3px;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  height: 30px;
}

footer img {
  vertical-align: middle;
}
<footer>
  <div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2018/06/telefoon-png.png" height="30"></div>
  <div class="socialText">06-123456</div>
  <div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2019/05/white-mail-png-1.png" height="30"></div>
  <div class="socialText">[email protected]</div>
  <div class="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/">
  <img src="https://pngimage.net/wp-content/uploads/2019/05/white-transparent-instagram-png-1.png" height="30"/></a></div>
  <div class="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
</footer>

0
Simran On

Flexbox is your best friend for this kind of layout. Just give the footer wrapper display:flex and these two other additional rules to center the items in the footer vertically and horizontally:

footer {
  display: flex;
  align-items: center; // centers items vertically
  justify-content: center; // centers items horizontally
}

Now you can remove all the padding & margin rules you were using to bump items up and down. Notice I added padding to the footer as well to give consistent space around the edges.

Final bit of advice, it is invalid to use id property with the same value on more than one item. The moment you want to reuse CSS, reach for classes instead. Cheers!

footer {
  display: flex;
  align-items: center;
  justify-content: center;
    background: #222222;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    color: white;
    font-family: proxima-nova, sans-serif;
    font-size: 20px;
}
.socialIcon {
    margin: 0 10px;
    height: 30px;
    width: auto;
}
<footer>
  <div class="socialIcon"><img src="https://picsum.photos/30" width="30"></div>
  <div class="socialText">06-123456</div>
  <div class="socialIcon"><img src="https://picsum.photos/31" width="30"></div>
  <div class="socialText">[email protected]</div>
  <div class="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/"><img src="https://picsum.photos/32" width="30px" /></a></div>
  <div class="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
</footer>