如何删除 CSS 中 <img> 周围的间距？

Question

我在图像的底部和右侧有这个奇怪的间距，我想将其删除。我已将填充和边距设置为 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>

有人可以帮忙吗？谢谢！

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

Answer 2

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

使用浮动。
使用 flexbox。
正在删除 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>

如何删除 CSS 中 <img> 周围的间距？

How to remove spacing around <img> in CSS?

css

image

spacing