CSS 规范 - 原子内联水平框

Question

我正在努力思考 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.

单个不透明框到底是什么意思？

非常感谢任何澄清。谢谢!

Answer 1

这意味着盒子是一个单一的实体单元，当它的文本不能全部放在一行时，它不能像行内盒子那样跨行分割。参见 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