CSS布局：为何inline类型<a>标签设padding无法撑开父div容器？

<a>标签默认display属性为inline（行内元素），其盒模型计算规则和块级、行内块元素存在本质差异，这是异常现象的核心原因，具体规则如下：

• 行内元素垂直方向的padding、border、margin不参与文档流布局计算：你给<a>设置的上下5px内边距，只会在视觉上向外渲染延伸，但不会计入父元素.nav-container的高度计算，父容器高度完全由内部文本的行高（文字内容高度+默认行间距）决定，因此不会被撑开。
• 行内元素垂直方向的视觉延伸不会推开相邻元素：由于垂直方向的内边距不占据实际布局空间，当hover触发<a>的背景色变化时，上下延伸出的带背景区域会直接溢出父容器边界，覆盖到上下相邻的其他元素（比如上方的标题栏、下方的内容区）。
• 行内元素水平方向的padding、margin是正常生效的：你设置的左右5px内边距会占据实际布局空间，推开相邻的其他行内元素，因此两个链接之间不会出现文字挤在一起的情况。

display: inline-block 修复问题的原理 #

将<a>的display属性设置为inline-block后，元素会同时具备行内元素和块级元素的布局特性：

• 元素不会独占一行，可以和其他行内、行内块元素排列在同一行，保留导航链接横向排列的效果
• 元素的盒模型计算规则和块级元素完全一致：上下左右四个方向的padding、border、margin都会纳入正常文档流计算，既可以撑开父容器的高度，也会推开相邻的其他元素，自然就不会出现背景溢出覆盖的问题。

复现用核心代码 #

.nav-container>a {
  color: #fefefe;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 5px 5px 5px;
  /* 取消下方注释即可修复溢出问题 */
  /* display: inline-block; */
}

.nav-container>a:hover {
  background-color: #bdbdbd;
}

<div class="nav-container">
  <a href="#">Link One</a>
  <a href="#">Link Two</a>
</div>

效果参考 #

• 鼠标悬停前默认状态：
  
• 鼠标悬停后溢出状态：
  

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