浏览器何时渲染行内元素空格？代码示例异常原因及规范依据

嘿，这个问题问得相当细致，刚好戳中了CSS文本渲染里容易被忽略的空白折叠规则！我来一步步给你拆解清楚～

一、浏览器什么时候会渲染行内元素中的空格？ #

浏览器对行内元素的空格遵循**空白折叠（white space collapsing）**规则，不是所有空格都会显示，以下几种情况会被渲染或保留：

• 行内元素之间的连续空白（包括空格、换行、制表符）会被折叠成单个空格显示；
• 非换行空格（ ）会被强制保留，不会参与折叠；
• 行内元素内部的空格，如果不处于块级元素的首尾、也不与其他连续空白合并，会被渲染为单个空格。

需要注意：块级元素开头或结尾的空白（包括其子元素内部的首尾空格）会被直接折叠消失，不会显示。

二、你的代码片段现象拆解 #

先把你给出的代码清晰贴出来：

<style>
span { font-size: 300%; border: 1px solid red; }
</style>
<div> 
  <span> aa </span><span>bb</span><span> cc </span><span> dd </span><span> ee </span> 
</div>

咱们逐个分析每个<span>的空格表现：

1. <span> aa </span>：
   • 元素开头的空格：和<div>开头的换行、缩进空白属于连续空白，且处于块级元素<div>的开头区域，被折叠消失，所以aa前面无空格；
   • 元素结尾的空格：后面紧跟<span>bb</span>的起始标签，不属于块级首尾区域，也没有其他连续空白，所以被保留为单个空格，因此aa之后显示空格。
2. <span>bb</span>：
   元素内部无空格，前后也没有额外空白，所以bb前后都无空格。
3. <span> cc </span>：
   • 开头的空格：前面是<span>bb</span>的结尾，没有连续空白，不属于块级首尾，被保留；
   • 结尾的空格：后面是<span> dd </span>的起始标签，同样被保留；
     因此cc的前后都显示空格，也就是“周围有空格”。
4. <span> dd </span>：
   • 开头的空格：和<span> cc </span>结尾的空格属于连续空白，被折叠成一个（已经在cc后面显示了），所以dd前面无额外空格；
   • 结尾的空格：后面紧跟<span> ee </span>的起始标签，被保留，因此dd之后显示空格。
5. <span> ee </span>：
   • 开头的空格：和<span> dd </span>结尾的空格属于连续空白，被折叠成一个（已经在dd后面显示了），所以ee前面无空格；
   • 结尾的空格：和<div>结尾的换行、缩进空白属于连续空白，处于块级元素结尾区域，被折叠消失，所以ee后面无空格；
     因此ee周围无空格。

三、对应的规范文档 #

这个空白折叠规则来自CSS Text Module Level 3规范，其中专门定义了空白字符的处理逻辑，包括连续空白的折叠、块级首尾空白的消除、行内元素空白的渲染等细节，是浏览器处理这类文本渲染的标准依据。

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