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

内联块有此问题。有关详细信息read this 有几种方法

使用float。
使用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>

Answer 2

使用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
}

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

2 个答案: