html - 删除显示内联 block 列表后的空格

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将鼠标悬停在导航点上，您可以非常清楚地看到空间。

Answer 1

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

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