html - 为什么 li 比 a 子标签高

Question

我不知道为什么li标签比a标签高1px，代码如下 fiddle http://jsfiddle.net/9Wy8z/

#nav {
width: 100%;
background-color: #5A9AFF;
}

#nav > #nav_container > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav > #nav_container > ul > li {
    display: inline-block;
    padding: 10px 0;
}

#nav > #nav_container > ul > li > a {
    padding: 10px;
    text-decoration: none;
    color: #1b1b1b;
}

#nav > #nav_container > ul > li > a:hover {
    background-color: #e0e0e0;
}


<div id="nav">
        <div id="nav_container">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
    </div>

这导致 a 标签为 38px，li 为 39px，我不确定这是为什么？

Answer 1

这是因为 a 元素默认是内联。这就是为什么您必须向 li 元素添加填充； li 正在获取其内容的高度，这是 inline (它不计算填充)。这种方法的问题在于 li 元素也有一些固有的填充，并且它不等于您为 a 元素提供的填充。

将 a 标记设置为 display:block; 并从 li 中删除填充将通过显示 来解决此问题block 中的 a 元素，而不是 inline 中的元素，导致 li 仅采用 a 的大小code> 元素(而不是更多)减去您尝试在补偿中添加的任何强制填充。

JSFiddle

#nav > #nav_container > ul > li {
    display: inline-block;
}

#nav > #nav_container > ul > li > a {
    padding: 10px;
    text-decoration: none;
    color: #1b1b1b;
    display: block;
}