how to remove the unwanted space before the image links - html

Question

i am making a website and tried to connect link via img and after coding i am getting a space before facebook image is there any way to eliminate space before the image starts
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>

Answer 1

Set the padding of your ul to 0.
By browser-default an ul has always a padding-left.
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding: 0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>

Answer 2

Each browser sets its value default styles for a variety of HTML-elements. With CSS Reset, we can neutralize this difference to ensure cross-browser style.
http://cssreset.com

Answer 3

Remove the padding on your <ul>:
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding:0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>

Answer 4

Add padding: 0 to ul
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding: 0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>