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，解決間隙問題
}

效果以下：