CSS Spec – 原子内联级别框

我试图将我的大脑包围在CSS的一些更精细的点上,我发现这部分摘自 W3 CSS Visual Formatting Spec 9.2.2特别是钝：

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

单个不透明盒子究竟是什么意思？

非常感谢任何澄清.谢谢！

这意味着该框是一个单一的实体单元,并且当它的文本不能全部适合单行时,它不能像内联框一样分开.请参阅 section 9.4.2,其中描述了此拆分行为以及术语“内联格式化上下文”和“行框”.

如果一行上没有任何空间来容纳原子内联框,则如果存在换行符,则整个框将换行到下一行(否则它会溢出行框),即使原子内联框包含内联内容这将部分适合当前行的剩余空间.这是因为原子内联的内联内容不参与与原子内联本身相同的内联格式化上下文 – 它在原子内联框中参与单独的内联格式化上下文,因此必须保持在原子的边界内内联框.

相比：

p {
    width: 5em;
    background-color: #f0f0f0;
}

span {
    background-color: #d0d0d0;
}

.inline-block {
    display: inline-block;
    width: 4.5em;
}

<p>text <span class=inline>inline text</span> more text
<p>text <span class=inline-block>inline block</span> more text