如何在图像链接之前删除不需要的空间

Question

我正在制作一个网站，并试图通过img连接链接和编码后我得到一个空格之前Facebook图像有任何方法消除空间图像开始之前

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将ul的填充设置为0。 通过浏览器默认情况下，ul始终为padding-left。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

每个浏览器为各种HTML元素设置其值默认样式。通过CSS重置，我们可以消除这种差异，以确保跨浏览器的风格。

http://cssreset.com

Answer 3

删除<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

将padding: 0添加到ul

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;