添加display:block后导航元素UI变化的原理疑问

初始UI #

给定的HTML与CSS代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Flexbox example page</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <nav>
      <ul class="site-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Support</a></li>
        <li class="nav-right"><a href="#">About</a></li>
      </ul>
    </nav>
  </body>
</html>

CSS代码 #

*,::before,::after {
  box-sizing: border-box;
}
body {
  margin: unset;
  background-color: #709b90;
  font-family: Helvetica, Arial, sans-serif;
}
.site-nav {
  display: flex;
  padding: 0.5rem;
  list-style-type: none;
  background: #5f4b44;
}
.site-nav > li > a {
  text-decoration: none;
  color: white;
  background: #cc6b5a;
  padding: 0.5em 1em;
}

添加的CSS代码 #

.site-nav > li > a {
  display: block;
}

最终UI #

我预期会得到该UI，但无法理解其CSS工作原理。
注：通过开发者工具发现，block值使元素占据父元素的全部宽度，产生换行，导致导航项内容高度增加1px。

疑问 #

1. display:block属性如何影响UI？（即添加block值后，li元素的padding自动增加！）
2. 我未能理解的底层逻辑是什么？
3. 我是否遗漏了某些深层知识点？

解答 #

1. display:block对UI的影响 #

默认<a>是行内元素，它的尺寸由内容决定，垂直方向的padding不会完全撑开父元素<li>的高度——浏览器只会渲染padding，但不会让父元素跟着长高。

设置display:block后，<a>变成块级元素：

• 它会自动占满父元素<li>的全部水平宽度，视觉上红色背景区域会填满整个导航项的横向空间；
• 垂直方向的padding会完全生效，直接撑开<a>的高度，而<li>作为flex容器的子项，高度会自动适配<a>的高度，所以看起来导航项整体变高了——并不是<li>的padding增加了，而是<a>的高度被padding撑开后带动了<li>的高度变化。

2. 底层逻辑 #

核心是行内元素与块级元素的盒模型差异，结合flex布局的子项尺寸规则：

• 行内元素属于文本流的一部分，垂直空间由行高控制，垂直方向的padding/margin不会影响父元素的高度，只会溢出；
• 块级元素的盒模型属性（padding、margin、宽高）会完全作用于自身尺寸，父元素会根据块级子元素的尺寸自动调整；
• 在flex布局中，<li>作为flex子项，默认宽度由内部内容决定，高度会适配子元素的高度，所以当<a>从行内变成块级后，<li>的尺寸会跟着<a>的变化而调整。

3. 遗漏的知识点 #

你可能没吃透这几个核心知识点：

• 行内元素与块级元素的盒模型行为差异，尤其是垂直方向属性对父容器的影响；
• Flex布局中flex子项的尺寸计算规则，包括默认的flex-basis和align-items行为；
• 非替换行内元素的特有渲染规则，比如尺寸由文本内容决定、垂直padding不撑开父容器等。

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