如何让span元素占满父div的全部高度？

我正在独立制作个人首个网站，现有一组作为选择器（selector）的span元素，希望鼠标悬停（hover）时，这些span能占满其所在div的全部空间，但不知如何实现，特此求助。以下是我的代码：

CSS代码

*
{
    margin:0;
    padding:0;
}
.selector  {
    cursor: pointer;
    padding-right: 40px;
    padding-left: 20px;
    display:inline-block;
}
.link  {
    background-color:LightGray;
    color:black;
    padding: 5px;
    font-size: 25px;
    overflow:hidden;
}

HTML代码

<div class="link"><b>
    
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Prehrana</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Pica</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Ciscenje  </span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Drugo</span>
<span onmouseover= 'style="background-color:white;"' onmouseout= 'style="background-color:LightGray;"' style="color:black;" class="selector">Akcija</span>

</b></div>

注：span内的文本为克罗地亚语，这是我首次独立制作网站，请不要取笑我。

试试这么改就能实现你要的效果：

• 换掉内联鼠标事件，用CSS的:hover伪类
  你现在写的onmouseover和onmouseout太繁琐，直接用CSS的:hover就能搞定悬停样式切换，代码更干净还好维护。

• 把.link改成Flex布局
  给.link加个display: flex和align-items: stretch，这样里面的span会自动拉满整个div的高度；再补个align-items: center能让文本垂直居中，看着更舒服。

• 调整.selector的内边距和高度
  把.link原来的padding移到.selector上，避免span和div边缘留空隙；给.selector设height: 100%，确保它能填满div的高度；再加个display: flex和align-items: center让span里的文本居中。

修改后的完整代码：

CSS

* {
    margin: 0;
    padding: 0;
}
.link {
    background-color: LightGray;
    color: black;
    font-size: 25px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.selector {
    cursor: pointer;
    padding: 5px 40px 5px 20px;
    display: flex;
    align-items: center;
    height: 100%;
    transition: background-color 0.2s; /* 可选：加个过渡动画，hover时颜色变化更丝滑 */
}
.selector:hover {
    background-color: white;
}

HTML

<div class="link"><b>
    <span class="selector">Prehrana</span>
    <span class="selector">Pica</span>
    <span class="selector">Ciscenje</span>
    <span class="selector">Drugo</span>
    <span class="selector">Akcija</span>
</b></div>

这样改完，鼠标悬停在span上时，它的白色背景会完全填满整个.linkdiv的空间，不管高度还是左右的内边距都贴合得刚刚好。

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