CODEWITHSUNDEEP
htmlcss
user3443401
user3443401

Reputation: 77

how to remove the unwanted space before the image links

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>

Upvotes: 2

Views: 46

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

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

Upvotes: 1

m4n0
m4n0

Reputation: 32255

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>

Upvotes: 0

TeeDeJee
TeeDeJee

Reputation: 3741

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>

Upvotes: 2

j08691
j08691

Reputation: 207891

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>

Upvotes: 0

Related Questions