如何删除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 { \t \t \t \t 
 
    margin-bottom: 5px; \t 
 
} 
 
.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; \t \t 
 
} 
 
.light_container { 
 
    background-color: rgba(0, 34, 102, 0.8); \t 
 
}

<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 有使用浮动几个方面

1. 。
2. 使用flexbox。
3. 删除html中标记之间的空白。
4. 切缘阴性
5. .....

例如没有您的问题。

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