Flex容器内文本换行后，子元素间为何出现额外间距？

HTML代码 #

<div class="container">
  <span>
    this is some longlonglonglonglonglong text
  </span>
  <div class="indicator"></div>
</div>

CSS代码 #

.container {
  display: flex;
  width: 300px;
}

.indicator {
  width: 50px;
  height: 50px;
  background-color: blue;
}

问题描述 #

设置固定宽度的flex容器，内部包含两个子元素，第一个子元素的超长文本会自动换行，但子元素之间出现了预期外的间距。

原因分析 #

出现间距的核心原因是HTML中的空白字符被解析为匿名flex子元素：

• span与.indicator之间的换行、缩进空格会被浏览器合并成一个空格字符，这个匿名文本节点会作为flex容器的第三个子元素，占据一定宽度，导致两个目标子元素之间出现空隙。
• 此外，span内部文本的前导换行和缩进空格，也会让span的内容区域存在额外空白，间接影响视觉上的间距感知。

解决方法 #

方法1：消除子元素间的空白字符

直接去掉span和.indicator之间的换行与空格，或者用注释隔离空白：

<div class="container">
  <span>
    this is some longlonglonglonglonglong text
  </span><div class="indicator"></div>
</div>

或者：

<div class="container">
  <span>
    this is some longlonglonglonglonglong text
  </span><!--
  --><div class="indicator"></div>
</div>

方法2：通过CSS隐藏空白字符

给flex容器设置font-size: 0，让匿名空格节点不占据空间，再在子元素中恢复字体大小：

.container {
  display: flex;
  width: 300px;
  font-size: 0;
}

.container span {
  font-size: 16px; /* 恢复默认字体大小 */
}

.indicator {
  width: 50px;
  height: 50px;
  background-color: blue;
}

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