基于CSS2.1规范的行内元素盒模型技术疑问咨询

嘿，咱们来逐个解决这两个关于CSS2.1双向上下文和行内盒模型的问题：

问题1：换行时生成多个inline box的原因 #

规范里提到的“最左侧的生成框”，并不是因为匿名行内盒哦。当一个inline-level元素（比如你例子里的<span>）因为内容过长被拆分成多个line box时，这个元素本身会被分割成多个inline box——这些都是属于原元素的“分段”盒子，和匿名inline box是两回事。

匿名inline box是用来包裹没有被行内元素包裹的裸文本的，而这里的多个inline box是同一个元素拆分出来的，每个都继承原元素的所有样式属性。CSS2.1明确规定：当inline-level元素的内容分布在多个line box中时，每个line box中的内容片段都会生成一个inline box，这些盒子同属原元素，所以会遵循direction属性的规则，来决定首尾盒子的边距、边框、内边距的渲染方式。

问题2：inline box的padding/border表现解释 #

你给出的示例中，<span>设置了margin: 0 10px; padding: 20px; border: 5px solid blue;，换行后呈现的效果完全符合CSS2.1第8.6节的规则，咱们拆解一下：

• 首先，每个line box里的inline box是按视觉顺序（而非代码的逻辑顺序）渲染margin、border和padding的。
• 因为<span>默认的direction是ltr（从左到右），所以元素首次出现的line box里，最左侧的那个inline box（也就是内容的第一行）会显示左margin、左border和左padding；元素最后出现的line box里，最右侧的inline box（内容的最后一行）会显示右padding、右border和右margin。
• 至于中间那些line box里的inline box，它们是元素内容被拆分后的中间段落，既不属于“首次出现的line box的最左侧框”，也不属于“最后出现的line box的最右侧框”，所以它们的左右padding和border不会被渲染——视觉上这些中间段是和相邻行的内容衔接的，自然不需要显示完整的左右边距和边框。

另外补充个小细节：inline元素的上下padding和border是会在每一行都渲染的，但它们不会改变行高的计算逻辑，所以你能看到每一行都有上下的蓝色边框和padding，这也是inline盒模型的典型特点。

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