匿名块框与普通块框表现是否存在差异？

示例代码 #

CSS

span {
  border: 2px solid #000;
  text-align: center;
  color: red
}

HTML

<span>
  A
  <div>
    B
  </div>
  C
</span>

核心疑问 #

已知A和C属于匿名块框，但为何它们的文本没有居中？该问题已有初步答案，但仍需更细致的解析：

• text-align文档指出该属性适用于块容器，按匿名块框属于块容器的逻辑，文本应该居中，难道匿名块框与普通块框表现不同？
• 作为块容器的div确实继承了text-align属性，文本B能居中，这更增加了困惑。

规范引用（翻译自W3C） #

匿名块框的属性继承自其包裹的非匿名框（例如，在“匿名块框”小节标题下的示例中，指的是DIV）。非继承属性采用初始值。例如，匿名框的字体继承自DIV，但边距为0。

详细解析 #

要理解这个问题，需要从浏览器的盒模型处理逻辑、text-align的作用机制两个层面拆解：

1. 行内元素包含块级元素时的盒模型重构
   原本span是行内元素，当它内部出现块级元素div时，浏览器会触发特殊处理：

   • 将span强制转换为块容器盒（但它的display属性仍保留inline的特性，边框会包裹所有内容）；
   • 把span内的文本内容（A和C）分别包裹进两个匿名块级盒，最终结构变为：span(块容器) → 匿名块盒A → 文本A、span → div → 文本B、span → 匿名块盒C → 文本C。

2. text-align的作用范围与继承逻辑
   text-align的核心作用是：控制块容器内部直接子级行内元素/文本的对齐方式，而非直接让块级子元素继承该属性。

   • 对于div：它是块级容器，同时text-align是可继承属性，所以它会继承父容器span的text-align: center，进而让内部的文本B居中；
   • 对于匿名块盒A/C：它们是块级盒，不属于span的直接行内子元素，因此span上的text-align不会直接作用于它们。同时，根据规范，匿名块盒的可继承属性需继承自包裹它的最近非匿名块级框，但这里的span是行内类型的块容器，并非块级框，所以匿名块盒的text-align会使用初始值left，导致文本A/C左对齐。

3. 匿名块盒与普通块盒的差异
   匿名块盒和普通块盒的核心差异在于：匿名块盒无法被直接选中设置样式，且继承规则依赖于“最近的非匿名块级框”。如果把匿名块盒替换为普通块盒（比如用<p>A</p>替代文本A），这个普通块盒会继承span的text-align: center，文本就能居中——这是因为普通块盒作为可识别的元素，会正常继承可继承属性，而匿名块盒的继承规则更严格，仅能从非匿名块级框继承。

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