如何在 CSS 中删除 <image> 周围的间距？ [复制]答案

【问题标题】：How to remove spacing around <img> in CSS? [duplicate]如何在 CSS 中删除 <image> 周围的间距？ [复制]
【发布时间】：2016-04-30 02:59:08
【问题描述】：

我在图像的底部和右侧有一个奇怪的间距，我想将其删除。我已将填充和边距设置为 0px，但它仍然显示。这很烦人，因为我希望图像以零间距整齐地装入外框，以获得像素完美的外观。

img.news_title_icon {
  width: 80px;
  height: 80px;
  padding: 0px; margin: 0px; border: 0px;
}
body {
  width: 800px;
  margin: auto;
  margin-top: 50px; /* for testing */
  padding: 0px;
  font-family: arial, helvetica, sans-serif;
  font-size: 11pt;
  background-color: #001133;
  color: white;
}
div.news_title_container {				
  margin-bottom: 5px;	
}
.light_container, .dark_container {
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.57);
  border: 1px solid #005eff;		
}
.light_container {
  background-color: rgba(0, 34, 102, 0.8);	
}

<div class="news_title_container light_container">
  <img class="news_title_icon" alt="an image">
  <img class="news_title_icon" alt="an image">
  <img class="news_title_icon" alt="an image">
</div>

有人可以帮忙吗？谢谢！

【问题讨论】：

Mystery white space underneath image tag

标签： css image spacing

【解决方案1】：

图片使用float:left。

img.news_title_icon {
    float: left;   //added this
    width: 80px;
    height: 80px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

根据 OP 评论更新用这个

div.news_title_container {
    margin-bottom: 5px;
    font-size: 0; //added this
}

【讨论】：

唯一的问题是背景面板不包含图像。图像漂浮在它外面。
检查更新的答案
我想实际上我可以让背景面板的高度为 80 像素。在我想放入另一张图片但必须这样做的情况下，这似乎有点混乱。谢谢。

【解决方案2】：

内联块有这个问题。更多详情read this 有几种方法

使用浮点数。
使用弹性盒。
删除 html 中标签之间的空格。
负边距
.....

例如没有你的问题。

<div class="news_title_container light_container">
  <img class="news_title_icon" alt="an image"><img class="news_title_icon" alt="an image"><img class="news_title_icon" alt="an image">
</div>

【讨论】：

哦，没错，这确实解决了它，但它会让编码变得非常痛苦，必须将它放在一行中。我将研究 flexbox 的想法。谢谢。