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

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

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

  • aaaa

  • picture

    title

  • aaaa

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

line元素img出现默认间隙用vertical-align解决_第1张图片

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

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

效果如下: line元素img出现默认间隙用vertical-align解决_第2张图片

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

你可能感兴趣的:(line元素img出现默认间隙用vertical-align解决)