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

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

Answer 2

他们是<img>元素与结束</a>代码之间的空格。

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

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

Answer 3

我认为将<a>设置为inline-block

会更有意义

.social_media_wrapper a {
    display: inline-block;
}

这样你的链接就嵌入了实际的图像。

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

3 个答案: