欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

行内块的父元素设置字体大小后，行内块元素会有间距，为什么？
注意变量的可行域
后代选择器和兄弟选择器的使用场景

行内块元素间距问题#

是的，这是一个非常经典的 CSS 问题。

当元素设置为 display: inline-block;（行内块）时，它们会像文本字符一样排列。这意味着 HTML 源代码中标签之间的空白字符（换行符、空格、缩进）会被浏览器渲染成一个空格。

为什么会有间距？#

在你的代码中：

1
<nav>
2
  <a href="#">Home</a>
3
  <!-- 这里有一个换行符和缩进，浏览器会把它当成一个空格 -->
4
  <a href="#">About</a>
5
  ...
6
</nav>

因为 <a> 标签是 inline-block，浏览器会把它们之间的换行符渲染成一个空格。这个空格的大小取决于父元素的字体大小。这就导致了 <a> 标签之间出现了意料之外的间隙，使得它们无法精确地紧挨在一起（例如导致总宽度超出父容器宽度而换行）。

为什么要设置 `font-size: 0;`？#

在父元素 nav 上设置 font-size: 0; (第 25 行) 是为了消除这个间距：

父级设为 0：nav 的字体大小变为 0，那么标签之间的那个“空格”的大小也就变成了 0px，间距就消失了。
子级重置：因为字体大小会继承，子元素 <a> 里的文字也会变成 0 看不见。所以必须在 <a> 标签中重新设置 font-size: 15px; (第 33 行) 来让文字正常显示。

总结#

原因：inline-block 元素之间的 HTML 换行符会被渲染成空格。
解决：父级 font-size: 0 消除空格大小，子级单独设置 font-size 恢复文字显示。

注意变量的可行域#

这里不能给每个a设置变量，然后让animation变换位置，因为animation获取不到a设置的变量

后代选择器和兄弟选择器的使用场景#

你的理解完全正确。

为什么不对？#

你注释掉的代码：

1
nav a:hover .animation

中间的空格代表后代选择器。这意味着浏览器会尝试在 <a> 标签的内部去寻找名为 .animation 的元素。

但在你的 HTML 结构中：

1
<nav>
2
    <a href="#">Home</a>
3
    <!-- ...其他 a 标签... -->
4
    <div class="animation"></div> <!-- 它是 a 的兄弟，不是儿子 -->
5
</nav>

.animation 和 <a> 是并列关系（兄弟关系），而不是父子关系。

正确写法#

正如你注释里说的，需要用兄弟选择器（波浪号 ~）。

完整代码展示#

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>滑动导航栏html</title>
8
  <style>
9
    body {
10
      background-color: #2c3e50;
11
    }
12

13
    :root {
14
      /* 全局变量 */
15
      --awidth: 150px;
16
    }
17

18
    nav {
19
      width: calc(var(--awidth) * 5);
20
      margin: 100px auto;
21
      height: 50px;
22
      background-color: #34495e;
23
      border-radius: 8px;
24
      font-size: 0;
25
      box-shadow: 2px 2px 2px #000;
26
      position: relative;
27
    }
28

29
    nav a {
30
      width: var(--awidth);
31
      height: 100%;
32
      line-height: 50px;
33
      font-size: 15px;
34
      display: inline-block;
35
      position: relative;
36
      z-index: 1;
37
      text-decoration: none;
38
      text-transform: uppercase;
39
      text-align: center;
40
      color: white;
41
      cursor: pointer;
42
    }
43

44
    .animation {
45
      position: absolute;
46
      top: 0;
47
      left: 0;
48
      z-index: 0;
49
      height: 100%;
50
      width: var(--awidth);
51
      background-color: #1abc9c;
52
      border-radius: 8px;
53
      z-index: 0;
54
      transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
55
    }
56

57
    /*中间的空格代表后代选择器。这意味着浏览器会尝试在 <a> 标签的内部去寻找名为 .animation 的元素。
58

59
      这是父子选择器，我们要用兄弟选择器 */
60
    /* nav a:hover .animation {
61
      width: calc(var(--awidth) * 5);
62
    } */
63
    /* 鼠标经过第1个a，找它后面的兄弟 .animation */
64
    nav a:nth-child(1):hover~.animation {
65
      left: calc(var(--awidth) * 0);
66

67
    }
68

69
    /* 第二个a 做动画效果 */
70
    nav a:nth-child(2):hover~.animation {
71
      left: calc(var(--awidth) * 1);
72
      background-color: #e74c3c;
73
    }
74

75
    /* 第三个a 做动画效果 */
76
    nav a:nth-child(3):hover~.animation {
77
      left: calc(var(--awidth) * 2);
78
      background-color: #3498db;
79
    }
80

81
    /* 第四个a 做动画效果 */
82
    nav a:nth-child(4):hover~.animation {
83
      left: calc(var(--awidth) * 3);
84
      background-color: #9b59b6;
85
    }
86

87
    /* 第五个a 做动画效果 */
88
    nav a:nth-child(5):hover~.animation {
89
      left: calc(var(--awidth) * 4);
90
      background-color: #e67e22;
91
    }
92

93

94
  </style>
95
</head>
96

97
<body>
98
  <nav>
99
    <a href="#">Home</a>
100
    <a href="#">About</a>
101
    <a href="#">Blog</a>
102
    <a href="#">News</a>
103
    <a href="#">Contact</a>
104
    <div class="animation"></div>
105
  </nav>
106
</body>
107

108
</html>

Lovely firefly!

From Undreamt Night, I Thence Shine

关于行内块元素间距问题

欢迎来到我的博客！#

今天学到了什么#

行内块元素间距问题#

为什么会有间距？#

为什么要设置 `font-size: 0;`？#

总结#

注意变量的可行域#

后代选择器和兄弟选择器的使用场景#

为什么不对？#

正确写法#

完整代码展示#

赞助支持

目录

Lovely firefly!

From Undreamt Night, I Thence Shine

关于行内块元素间距问题

欢迎来到我的博客！#

今天学到了什么#

行内块元素间距问题#

为什么会有间距？#

为什么要设置 font-size: 0;？#

总结#

注意变量的可行域#

后代选择器和兄弟选择器的使用场景#

为什么不对？#

正确写法#

完整代码展示#

赞助支持

目录

为什么要设置 `font-size: 0;`？#