在显示内联块列表后删除 space

Question

很奇怪，我带有 display: inline-block 的未排序列表位于 height: auto div 元素内。但是 div 比未排序的列表高 3px。有人看到问题了吗？

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: monospace;
}
#main_navigation {
    width: 100%;
    background-color: #3e3e3e;
    text-align: center;
}
#main_navigation img {
    height: 5em;
    width: 5em;
    position: absolute;
    left: 1em;
    top: 0.5em;
}
#main_navigation ul {
    padding: 0px;
    margin: 0 auto;
    display: inline-block;
}
#main_navigation ul li {
    padding: 2em;
    list-style-type: none;
    display: table-cell;
    border-left: 1px solid #000;
}
#main_navigation ul li:hover {
    background-color: #e04100;
}
#main_navigation ul li:first-child {
    display: none;
}
#main_navigation ul li:nth-child(2) {
    border: none;
}
#main_navigation ul li a {
    font-size: 1.75em;
    color: #cecece;
    padding: 2em;
    text-decoration: none;
}

<nav id="main_navigation"> <a href="#"><img src="res/logo.png"></a>
    <ul id="main_navigation_ul">
        <li>Navigation
            <div id="menu_symbol" onclick="nav_toggle()">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <hr>
        </li>
        <li><a href="google.de">Home</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">About me</a>
        </li>
        <li><a href="#">Imprint</a>
        </li>
    </ul>
</nav>

JSFIDDLE 将鼠标悬停在导航点上，您可以看到 space 非常好。

Answer 1

更改列表中的 vertical-align 值：Fiddle example

#main_navigation ul {
    padding: 0px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

Answer 2

额外的像素来自于带有 display: inline-block 的元素是行内元素，因此它将被视为文本行中的字符。

元素放置在文本行的基线上，基线下方有space用于悬挂j、g等字符。这就是额外像素的来源。

据我所知，您可以毫无问题地删除 display: inline-block 样式。

在显示内联块列表后删除 space

Remove space after an display inline-block list

html

css