html - 为什么位置:absolute adds 4px to the height of the outer container and how to remove it?

Question

我正在尝试制作某种流体集管或其他东西。问题是我注意到当我将 position:absolute 添加到 a 元素时，它会向标题添加 4 个像素:

如果我删除 position:absolute，则它不会在高度上额外增加 4 个像素:

这是我到目前为止的想法:

<div class="content-container">
        <a href="#" class="header-logo"><img src="https://i.imgur.com/bn2vAjo.png" alt="" title=""></a>
        <nav class="main-menu">
            <ul>
                <li><a href="">Journal</a></li>
                <li><a href="">About</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
</div>

.content-container {
    background: #292929;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    align-self: center;
}

nav.main-menu {
    align-self: center;
}
nav.main-menu li {
    display:inline-block;
    width: 132px;
    height: 132px;
    font-weight:600;
    position: relative;
}

nav.main-menu li a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

* {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

https://jsfiddle.net/yafs3yoo/

我显然在这里遗漏了一些东西，但我自己无法弄清楚。 我希望这个标题正好是 132 像素高(带边框)， Logo 位于左侧(垂直居中)，菜单位于右侧(垂直居中)。如何摆脱标题中的这些额外的 4 个像素？

Answer 1

正如 Paulie_D 在评论中暗示的那样，只需将 vertical-align: top; 添加到 nav.main-menu li 的规则中即可

https://jsfiddle.net/3z0vefLL/1/

这是由于内联 block 沿基线的默认垂直对齐。