为什么位置：绝对将外部容器的高度加4px以及如何移除它？

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像素高（带边框），标识位于左侧（垂直居中），菜单位于右侧（垂直居中）。如何摆脱标题中的这些额外的4个像素？

Answer 1

正如Paulie_D在评论中暗示的那样，只需将element.text添加到vertical-align: top;

的规则中

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

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