鍍金池/ 問答/HTML/ li的特性：上方增加了一段高度

li的特性：上方增加了一段高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>li</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #main {
            width: 392px;
            height: 203px;
        }
        img {
            width: 392px;
            height: 203px;
        }
    </style>
    
</head>
<body>
<div id="main">
    <ul id="box">
        <li><img src="image/download.png" /></li>
    </ul>
</div>
</body>
</html>

為何查看元素的時(shí)候，li 392×208 ,這個(gè)li在下方加了一個(gè)高度 5px，不是margin padding,是什么？

回答
編輯回答
她愚我

img的鍋
給img加上:display: block;

2017年2月1日 00:22
編輯回答
影魅
     img是行內(nèi)元素，默認(rèn)display: inline; 它與文本的默認(rèn)行為類似，下邊緣是與基線對(duì)齊，
而不是緊貼容器下邊緣。將displayp設(shè)置為block即可消除上面說的幾個(gè)像素的差別，
或者font-size:0

我對(duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一） ? 張鑫旭

2017年3月9日 12:16