Where does this margin come from?

Question

I have a margin between the images and the Share us and I don't really know where it comes from. img: https://liko.tinytake.com/sf/MTU4MjUyXzk4ODk1MA

My HTML5 code:

<div id="socailMedia">
   <p>Follow us:</p>
   <div id="followImg">
       <img src="socailMedia/facebook.png" alt="followFacebook">
       <img src="socailMedia/twitter.png" alt="followTwitter">
       <img src="socailMedia/instagram.png" alt="followInstagram">
       <img src="socailMedia/pinterest.png" alt="followPinterest">
       <img src="socailMedia/google.png" alt="followGoogle">
    </div>
    <p>Share us:</p>
</div>

My CSS code:

#socailMedia{
    color:#939393;
    width: 350;
    float:left;
    margin-left: 20;
}
#socailMedia p {
     margin: 0;   
    background-color: red;
}
#followImg img{
    background-color: red;
    height: 35;
    padding:0;
    margin: 0;
}

you are not specifying units for any of the css rules in your css — Lal, May 16 '15 at 14:57

score 0 · Answer 1 · answered May 16 '15 at 14:52

Perhaps from the enclosing "followImg" div. You've cancelled the margin attribute for the nested img tags, but haven't addressed their encompassing div. There may also be padding involved, depending on how the CSS is inherited. You can use the Web inspector in Chrome, Safari, or Firefox to take a look at the active attributes for these elements, and better troubleshoot the situation.

The following might be all that's needed:

#followImg {
    padding: 0;
    margin: 0;
}

score 0 · Answer 2 · answered May 16 '15 at 14:56

There is a padding that comes with paragraph tags. Try this instead:

<div id="socailMedia">
   <p>Follow us:</p>
   <div id="followImg">
       <img src="socailMedia/facebook.png" alt="followFacebook">
       <img src="socailMedia/twitter.png" alt="followTwitter">
       <img src="socailMedia/instagram.png" alt="followInstagram">
       <img src="socailMedia/pinterest.png" alt="followPinterest">
       <img src="socailMedia/google.png" alt="followGoogle">
    </div>
    <p style="margin:0;">Share us:</p> <!-- CHANGE THIS -->
</div>

Salman A · Accepted Answer · 2015-05-16T15:07:29.553

You need to add vertical-align: bottom to the #followImg img elements:

#socailMedia {
  color: #939393;
  width: 350;
  float: left;
  margin-left: 20;
}
#socailMedia p {
  margin: 0;
  background-color: red;
}
#followImg img {
  background-color: red;
  height: 35;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
}

<div id="socailMedia">
  <p>Follow us:</p>
  <div id="followImg">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followFacebook">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followTwitter">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followInstagram">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followPinterest">
    <img src="http://dummyimage.com/35x35/FC0/000" alt="followGoogle">
  </div>
  <p>Share us:</p>
</div>

By default images are aligned with the baseline which rests few pixels above the bottom of the parent. Setting vertical alignment to bottom will cause the images to align with the bottom of the paragraph.

Where does this margin come from?

3 Answers3