解决图片下方总有空白去不掉

问题

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 特别大时，会失效。