Search code examples
htmlcsstextlayout

Root Inline Box - Can an root inline box have descendants in turn or what does that mean?

https://www.w3.org/TR/css-inline-3/#root-inline-box

The block container also generates a root inline box, which is an anonymous inline box that holds all of its inline-level contents. (Thus, all text in an inline formatting context is directly contained by an inline box, whether the root inline box or one of its descendants.) The root inline box inherits from its parent block container, but is otherwise unstyleable.

What does "one of his descendants" refer to?

Can an root inline box have descendants in turn or what does that mean?

Solution

  • Let's suppose we have this mark-up

    <div>
  In the case of <strong>Fire</strong>, break glass to 
  <span>sound alarm. <img src="bell.jpg" alt="bell symbol"></span>
</div>

    This will generate a box tree. Box tree showing block container box, root inline box, 3 descendant boxes and four text runs.

    "Fire" and "sound alarm" are contained within boxes that are descendants of the root inline box, while "In the case of " and " break glass to " are contained directly by the root inline box.