line元素img出现默认间隙用vertical-align解决

2019独角兽企业重金招聘Python工程师标准>>>

父级设置了line-height，内联元素img也受影响；因为它本身属性有宽高，故可正常显示图片；但是在图片下方会出现一个间隙。如下所示：

            

                
aaaa
            
            

                
                
title
            
            

                
aaaa
            
        

body,p{margin: 0;padding: 0;}
            
            li{
                list-style: none;
                line-height: 30px;
            }

是由于该元素默认垂直对齐方式为以父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙。查看博文 解决方法

img{
    border: 0;//IE下出现白边
    vertical-align: top;//也可设置为middle，解决间隙问题
}

效果如下：

转载于:https://my.oschina.net/u/3661223/blog/1559066