html - 我的图像之间有奇怪的线条

Question

所以我在网页上放置了一些社交媒体按钮。 http://prntscr.com/38xmt9 .

如您所见，图像之间有黑线，我不知道为什么。

图片代码:

<div class="social_media_wrapper">
   <h3 class="social_media_text">
      Volg ons:
   </h3>
   <a href="https://www.youtube.com/user/Qviv01">
      <img class="social_media_images" style="position: relative; width: 20px; height: 20px;border: 0;line-height: 100%;outline: none;text-decoration: none;" src="http://gallery.mailchimp.com/b34ec5d84240c7bc42b62c859/images/youtube_icon_256.png" alt="Youtube_icon">
   </a>
   <a href="https://www.facebook.com/Qviv.Video">
      <img class="social_media_images" style="position: relative; width: 20px; height: 20px;border: 0;line-height: 100%;outline: none;text-decoration: none;" src="http://gallery.mailchimp.com/b34ec5d84240c7bc42b62c859/images/facebook_icon_256.png" alt="Facebook_icon">
   </a>
   <a href="https://twitter.com/Qviv">
      <img class="social_media_images" style="position: relative; width: 20px; height: 20px;border: 0;line-height: 100%;outline: none;text-decoration: none;" src="http://gallery.mailchimp.com/b34ec5d84240c7bc42b62c859/images/twitter_icon_256.png" alt="Twitter_icon">
   </a>
   <a href="https://plus.google.com/106710969799929734976/videos?hl=nl">
      <img class="social_media_images" style="position: relative; width: 20px; height: 20px;border: 0;line-height: 100%;outline: none;text-decoration: none;" src="http://gallery.mailchimp.com/b34ec5d84240c7bc42b62c859/images/google_plus_icon_256.png" alt="Google_plus_icon">
   </a>
</div>

由于它是一个完整构建的页面，我无法粘贴所有样式 css，但这里是大部分相关代码:

.social_media_wrapper{
    float:right;
    padding-top:20px;
}
.social_media_text{
    float:left;
    font-size:12px !important;
    padding-top:5px;
}

.social_media_images{
    background-image:none !important;
    padding-right:5px;
    padding-left:5px;
}

Answer 1

去掉<a>之间的空格和 <img>标签。

或者将以下内容添加到您的 CSS 中:

.social_media_wrapper a {
text-decoration:none;
}

这会从链接中删除下划线。