Html 为什么位置：绝对增加4倍的高度外容器和如何删除它？

我在试着做一种流体头或其他什么的。问题是，我注意到，当我向元素添加position:absolute时，它会向标题添加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>

很明显，我在这里漏掉了一些东西，但我自己也找不到。

---

我希望这个标题是完全132像素高的边框，标志是在左侧垂直居中，菜单是在右侧垂直居中。如何去掉标题中额外的4个像素？

正如Paulie_D在评论中所暗示的，只需添加垂直对齐：顶部；导航主菜单li的规则

---

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

没有理由将li或链接设置为位置：绝对…我不确定您这样做是为了实现什么。您不是绝对对齐li，而是对齐a。我怀疑是底部的旧内联块额外空间。因为您正在使用flexbox…为什么不继续这样做看起来，如果设置垂直对齐：top，则无关紧要；或垂直对齐：底部；。在这两种情况下，li元素下面没有额外的4个像素，这对我来说没有任何意义。默认值是基线，所以当您从下到上更改垂直对齐时，它应该将全文行添加到ul元素的高度，这取决于使用基线时它会添加4个像素，对吗？是否有任何文章或东西可以说明为什么内联块元素会发生这种情况？这是一个错误吗？默认情况下，内联和内联块元素下面也有一些空白，因为它们在基线处对齐，这意味着它们下面有一些保留空间，用于延伸到基线以下的字母的后代，如j、g p等。考虑内联元素通常包含文本，将它们对齐到底部或顶部，而不是默认基线对齐，避免了这一点。

.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;
}