如何刪除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 
}