为何锚点元素（<a>）的内边距超出父级列表项（<li>）且<li>未自适应扩展？

嘿，这个问题其实是行内块元素（inline-block）的默认垂直对齐规则在搞怪！让我给你拆解清楚：

问题根源 #

你的<li>设置了display: inline-block，而它里面的<a>是默认的行内元素（display: inline）。当你给<a>加上padding: 0.2rem 0的上下内边距时，这个内边距确实会撑开<a>的高度，但因为inline-block元素默认的vertical-align属性是baseline（基线对齐），<li>的高度只会计算到内部行内元素的基线位置，不会完全包含<a>的上下内边距——看起来就像是<li>没自适应高度，实际上是它的高度被基线对齐限制了。

你可以快速验证：给<li>加个背景色，再给<a>加个不同的背景色，就能看到<a>的上下内边距其实“溢出”了<li>的范围。

解决方法（任选其一即可） #

方法1：调整<li>的垂直对齐方式

把<li>的vertical-align改成top/middle/bottom，打破基线对齐的限制，让它的高度完全包含内部元素：

.main-nav__item { 
  display: inline-block; 
  margin: 0 1rem; 
  vertical-align: top; /* 加上这一行 */
}

方法2：把<a>改成块级元素

让<a>占满<li>的宽度，它的内边距会直接撑开<li>的高度，同时还能让整个<li>区域都能响应点击（额外好处）：

.main-nav__item a {
  display: block; /* 修改为块级元素 */
  text-decoration: none; 
  color: #0e4f1f; 
  font-weight: bold; 
  padding: 0.2rem 0;
}

方法3：强制<li>包含内部溢出（不推荐，不如前两种直接）

给<li>加overflow: hidden或者设置合适的line-height，也能让它的高度包含<a>的内边距，但这种方法不如前两种直观。

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