为何导航栏代码中需设置display:inline-block与vertical-align:bottom？

嘿，我来帮你拆解这两个属性在这个导航栏交互里的关键作用，搞懂为啥缺一不可！

一、display:inline-block的必要性 #

a标签默认是**display:inline**元素，这类元素的核心特性是：垂直方向的内边距（padding）只会撑开视觉区域，不会改变元素自身的布局位置。当你给hover状态的a标签加padding-bottom:0.5em时，如果是inline元素，这个内边距只会在元素下方多出空白，但元素本身不会往上移动——因为inline元素的布局是基于文本基线的，垂直padding不参与元素的定位计算。

改成display:inline-block后，a标签兼具了行内元素可横向排列的特性，又拥有块级元素的盒模型规则：垂直方向的padding会实实在在地改变元素的整体高度。当hover时增加padding-bottom，元素的底部被“往下推”，为了保持在导航栏的底部对齐（配合后面的vertical-align），元素自然就会向上移动，这就是你要的悬停上移效果的核心基础。

二、vertical-align:bottom的必要性 #

当你只设置display:inline-block但去掉vertical-align:bottom时，inline-block元素默认的垂直对齐方式是**baseline（文本基线）**。导航栏里的所有a标签都属于同一行的inline-block元素，它们共享这一行的基线位置。

当其中一个a标签触发hover、增加padding-bottom时，它的基线位置会被拉高，导致整行的基线跟着上移——所有其他a标签也会跟着基线一起往上走，这就是你看到“悬停一个链接所有链接都上移”的原因。

而设置vertical-align:bottom后，所有a标签都以自身的底部边缘作为对齐基准，每个元素的垂直位置只由自己的盒模型决定。单个元素增加padding-bottom只会让自己向上调整位置，不会影响整行的基线，也就不会带动其他链接一起移动了。

相关代码参考 #

HTML

<nav> 
  <a id="home-link" href="#">Home</a> 
  <a id="about-link" href="#">About</a> 
  <a id="schedule-link" href="#">Schedule</a> 
  <a id="contact-link" href="#">Contact</a> 
  <div> 
    <i id="paw" class="fas fa-paw"></i> 
  </div> 
</nav>

CSS

html { 
  font-size: x-large; 
  font-family: Montserrat; 
} 
nav { 
  position: fixed; 
  right: 0.5em; 
  bottom: 1em; 
  font-size: 1.25rem; 
  z-index: 2; 
} 
a { 
  margin-right: 0.5em; 
  transition: padding-bottom 0.25s; 
  display: inline-block; 
  text-decoration: none; 
  vertical-align: bottom; 
  color: orange; 
  text-shadow: 0.05em 0.05em 0.025em #404040; 
} 
a:hover { 
  padding-bottom: 0.5em; 
} 
#paw { 
  height: 4vh; 
  position: absolute; 
  bottom: -0.3em; 
  left: -100vw; 
  transition: all 1s; 
}

jQuery

$("nav > a").mouseenter(function () { 
  var atag = $(this); 
  $("#paw").fadeIn(250); 
  var left = atag.position().left; 
  var tagWidth = atag.width(); 
  var blockWidth = $("#paw").width(); 
  var middle = left + tagWidth / 2 - blockWidth / 2; 
  $("#paw").css("left", middle + "px"); 
}); 
$("nav").mouseleave(function () { 
  $("#paw").fadeOut(250); 
});

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