如何解决Bootstrap5导航栏链接hover时无法填满垂直空间的问题？

我使用Bootstrap导航栏并添加了hover效果，目前遇到的问题是：点击导航标签时，链接背景变为白色，但仍存在黑色边距，无法填满导航栏的全部垂直空间。

问题根源是Bootstrap默认给.nav-item设置了上下内边距，导致.nav-link的背景无法撑满导航栏整体高度。只需清除.nav-item的上下内边距，同时保留.nav-link的padding设置即可解决：

/* 清除.nav-item默认上下内边距 */
.nav-item {
  padding-top: 0;
  padding-bottom: 0;
}

.nav-item a {
  font-size: 12px;
  color: white;
  letter-spacing: 2.5px;
  padding: 25px !important;
  display: block;
}

.nav-item a:hover {
  background-color: white;
  color: black;
}

修改后，.nav-link的上下padding会直接撑满.nav-item的高度，hover时背景就能完全覆盖导航栏垂直空间，消除黑色边距。

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