为何悬停Academics列表项时，其底部边框与slideshow-container间出现空白？

1. 检查Academics列表项的边距设置 #

• 先排查悬停状态下是否给该列表项加了额外的margin-bottom，比如CSS里可能存在这类代码：

  .nav-item.academics:hover {
    margin-bottom: 8px; /* 多余的外边距直接撑开了间隙 */
  }
  

• 另外也留意该列表项的padding-bottom是否在悬停时被修改，间接导致元素高度变化，推高了下方容器。

2. 处理边框渲染导致的高度变化 #

• 浏览器默认会把边框宽度算在元素高度之外，如果导航栏是固定高度，悬停时新增的border-bottom会让列表项高度增加，自然会和下方容器产生间隙。
• 解决思路是提前预留边框空间：默认给所有导航列表项设置透明边框，悬停时只修改边框颜色，避免高度突变：

  .nav-item {
    border-bottom: 2px solid transparent;
    margin: 0;
    padding: 8px 0;
    box-sizing: border-box; /* 确保边框算在元素宽高内 */
  }
  .nav-item.academics:hover {
    border-bottom-color: #your-target-color;
  }
  

3. 检查下方容器的负边距适配 #

• 如果slideshow-container用了margin-top: -2px这类负值边距，正常情况下刚好贴合导航栏的边框，但一旦Academics项高度变化，负边距的贴合效果就会失效，露出间隙。
• 可以把负边距值调整为和导航项默认边框高度一致，或者直接去掉负边距，改用导航项预留边框的方案。

4. 修复行内元素的基线对齐问题 #

• 如果导航列表项是行内/行内块元素，悬停时的边框可能触发浏览器的基线对齐规则，产生额外空白。给列表项设置display: block或者vertical-align: top就能解决。

5. 重置浏览器默认样式 #

• 部分浏览器会给<li>标签默认添加margin或padding，可以用全局重置统一样式：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

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