innerHTML开头插入空格的CSS规范依据查询及浏览器与在线编辑器差异验证

• 在csswg.org或w3.org发布的官方规范中，哪部分定义了innerHTML开头插入空格时的行为？
• 下方实验里Chrome和JsFiddle的渲染结果不一样，哪一方的表现符合规范？

<html>
    <head>
        <style>
            section { height: 120px; background: gray; width: 100px; font-size: 100px;}
            div { display: inline-block; }
            .a { background: red ; height: 50px; width: 20px}
            .b { background: cyan; height: 50px; width: 20px}
        </style>
    </head>
    <body>
        <section> <div class="a"></div><div class="b"></div></section>
    </body>
</html>

1. 规范对应部分：
   这种空格的处理逻辑同时涉及HTML和CSS官方规范：

   • HTML规范的「空白处理」章节定义了块级元素内开头的空白符会被保留，但渲染时会折叠为单个空格（当周围是行内/行内块元素时）；
   • CSS Text模块的「空白处理规则」部分进一步明确，折叠后的空白符会参与行内排版，占据对应空间。

2. 渲染差异判断：
   Chrome、Firefox、Edge这类原生浏览器的表现符合规范——section开头的空格被折叠为单个空格，这个空格作为行内排版的一部分，会占据对应空间，导致两个div整体右移。JsFiddle的渲染结果不同，是因为平台对嵌入的HTML做了预处理，自动移除了块级元素开头的空白符，属于平台自身的优化逻辑，并非符合规范的标准行为。

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