Where does this margin come from? [duplicate] - html

Question

This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Closed 7 years ago.
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;
}

Answer 1

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.

Answer 2

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;
}

Answer 3

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>