多行链接周围出现额外内边距/外边距的问题解决

问题背景与重现 #

我通过以下代码实现胶片条样式的菜单（.menuitem代表单个影片项）：

基础样式代码 #

.menu {
    margin: 20px;
    display: flex;
    justify-content: center;
}

.menuitem {
    height: 78px;
    width: 102px;
    padding: 15px 9px;
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: black;
}

菜单HTML结构 #

<div class="menu">
    <div class="menuitem"><a href="item1.html" class="menulink">Item 1</a></div>
    <div class="menuitem"><a href="item2.html" class="menulink">Item 2 extra text</a></div>
</div>

核心问题 #

目前通过justify-content:center与text-align:center的组合，已实现单行、多行文本的居中显示，这部分符合预期。但链接的Hover样式存在异常：

.menulink {
    color: white;
    padding: 2px;
    text-decoration: none;
}

.menulink:hover {
    border: 1px dotted white;
}

单行文本的Hover边框与文本间距符合padding:2px的设置，但多行文本的Hover边框会延伸至.menuitem的左右内边距处，出现多余间距。尝试过两种调整方案，要么多行链接仍撑满内容区域，要么所有链接强制撑满，均未达到理想效果。

可行解决方案 #

问题根源在于Flex容器中，a标签会被默认拉伸，多行文本时会占据容器内的最大可用宽度。以下两种方案可解决该问题：

方案1：将链接设为行内块元素 #

让链接宽度贴合文本内容，同时保持垂直居中：

.menulink {
    color: white;
    padding: 2px;
    text-decoration: none;
    display: inline-block; /* 宽度贴合文本 */
    align-self: center; /* 保持垂直居中对齐 */
}

.menulink:hover {
    border: 1px dotted white;
}

方案2：限制链接最大宽度并居中 #

通过max-width: fit-content让链接宽度匹配文本，再用margin: 0 auto实现水平居中：

.menulink {
    color: white;
    padding: 2px;
    text-decoration: none;
    max-width: fit-content;
    margin: 0 auto; /* 水平居中 */
}

.menulink:hover {
    border: 1px dotted white;
}

两种方案都能让单行、多行文本的Hover边框精准贴合文本内容，同时保留菜单整体的居中布局，符合胶片条菜单的设计需求。

内容的提问来源于stack exchange，提问作者PromZA