Search code examples
htmlcssw3c

What exactly is an inline box?

https://w3c.github.io/csswg-drafts/css2/#inline-boxes

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box. 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.

I quoted the specification but I don't understand the part marked in bold.

Could you give me an example of inline box and an example of something that is not inline box?

I especially need details of the part marked in bold, please.

Solution

  • Suppose we have HTML like this:

    <!doctype html>
<html>
  <body>
    <div>
      <span>Hello world</span>
      <img href="example.com" alt="an example">
    </div>
  </body>
</html>

    A depiction of a DOM Document on the left and the Box tree it generates on the right

    From this we can see that the box created by the <span> inline box, its "Hello world" text content and the <img> inline-level box participate in inline formatting context established by the <div> element