如何阻止鼠标悬停<a>标签时其所在div的padding-bottom异常增加？

你碰到的这个情况是因为CSS边框会改变元素的盒模型大小。默认情况下元素的box-sizing是content-box，边框是加在元素内容之外的，所以hover时给<a>加2px的底部边框，会让这个链接元素的高度凭空多2px，父容器.header-main又是用align-items:center对齐的，所以整体看起来就像是父容器的padding-bottom被增加了，其实是子元素高度变化导致的布局偏移。

下面给你几种可行的解决方式，选哪种都能搞定：

方法1：提前用透明边框占位 #

给链接提前加一个透明的底部边框，hover的时候只改边框颜色，这样元素高度不会变：

.header-main a {
  font-family: 'Roboto Slab', serif;
  color: white;
  text-decoration: none;
  border-bottom: 2px solid transparent; /* 提前占好位置 */
}

.header-main a:hover {
  border-bottom-color: white; /* 只替换颜色 */
}

方法2：用伪元素做下划线 #

用::after伪元素生成下划线，完全不影响原元素的盒模型，还能灵活调整样式：

.header-main a {
  font-family: 'Roboto Slab', serif;
  color: white;
  text-decoration: none;
  position: relative; /* 让伪元素相对这个元素定位 */
}

.header-main a:hover::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 控制下划线和文字的间距 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
}

方法3：修改盒模型为border-box #

把链接的盒模型改成border-box，这样边框会算在元素内部尺寸里，但如果链接没有固定高度，可能还是会有细微变化，不如前两种稳妥：

.header-main a {
  font-family: 'Roboto Slab', serif;
  color: white;
  text-decoration: none;
  box-sizing: border-box;
}

.header-main a:hover {
  border-bottom: 2px solid white;
}

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