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

问题

img 下方与父容器之间经常出现间隙，大概是3px。是 Web 开发非常长常见的问题。

示例

在线运行示例

<div class="container">
    <img  
       src="https://cdn.jsdelivr.net/gh/PKief/[email protected]/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 特别大时，会失效。