解決圖片下方總有空白去不掉

問題

img 下方與父容器之間經常出現間隙，大概是3px。是 Web 開發非常長常見的問題。

示例

在線運行示例

<div class="container">
    <img  
       src="https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/html.svg"
     />
</div>

.container{
     border: 1px solid green;
 }
 .container img{
     width : 100px;
     height: auto;
     background:red;
     /*加上這一樣，圖片下方間隙就可以去除掉*/
     /*vertical-align: middle;*/
 }

原因

通過 Chrome DevTool ，可以看到 img 標籤的 display 默認是 inline。

瀏覽器渲染 inline 元素時，把它當成文本渲染，會在下方留出一些空白，方便與 g,y 這些下方比較突出的字符進行對齊。

解決

有以下幾種方式解決：

（1） 設置 img display: block
（2） 設置 img vertical-align: middle
（3） 設置 img 父容器的 font-size: 0px

三種方式根據實際情況使用。
第（2）種修改，在父元素的 font-size 特別大時，會失效。