内联格式化上下文是网页视觉呈现的一部分。内联框一个接一个地排列,按照正在使用的书写模式中句子运行的方向排列。
在水平书写模式中,框从左侧开始水平排列。
在垂直书写模式中,它们将从顶部开始垂直排列。
在下面的示例中,具有黑色边框的两个
元素是 块格式化上下文 的一部分,而在每个框内,单词参与内联格式化上下文。水平书写模式中的单词水平运行,而垂直书写模式中的单词垂直运行。
形成一行的框包含在一个称为行框的矩形区域中。此框将足够大以容纳该行中的所有内联框;当内联方向上没有更多空间时,将创建另一行。因此,段落是一组内联行框,在块方向上堆叠。
当内联框被拆分时,外边距、边框和内边距在拆分处没有视觉效果。在下一个示例中,有一个 元素包裹着一组单词,这些单词包裹在两行上。 上的边框在包裹点处断开。
内联方向上的外边距、边框和内边距将被尊重。在下面的示例中,您可以看到内联 元素上的外边距、边框和内边距是如何添加的。
注意:我使用的是逻辑、流相关的属性——padding-inline-start 而不是 padding-left——以便它们在文本是水平还是垂直时都可以在内联维度上工作。有关这些属性的更多信息,请阅读 逻辑属性和值。