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

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

<ul>
            <li>
                <p>aaaa</p>
            </li>
            <li>
                <img src="1.png" alt="picture" />
                <p>title</p>
            </li>
            <li>
                <p>aaaa</p>
            </li>
        </ul>

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

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

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

效果以下：