我的图像之间有奇怪的线条答案

【问题标题】：Strange lines in between my images我的图像之间有奇怪的线条
【发布时间】：2014-05-25 06:36:27
【问题描述】：

所以我在网页上放置了一些社交媒体按钮。 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;
}

【问题讨论】：

标签： html css image border mailchimp

【解决方案1】：

删除<a> 和<img> 标签之间的空格。

或者将以下内容添加到您的 css 中：

.social_media_wrapper a { text-decoration:none; }

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

【讨论】：

甜，我知道答案必须很简单。当网站允许时，我会接受。

【解决方案2】：

它们是您的 <img> 元素和您的结束 </a> 标记之间的空格。

您可以删除 HTML 中的空格，或删除链接的下划线。

HTML 解析器将 HTML 中的所有内联空格压缩为单个空格（<a> 元素是内联元素）。它们不会完全删除空格。

【讨论】：

【解决方案3】：

我认为将<a> 设置为inline-block 会更有意义

.social_media_wrapper a {
    display: inline-block;
}

这样您的链接就会嵌入实际的图像。

【讨论】：