0

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.

  • "_Could you give me an example and an example of one that is not `inline box`?_": This seems like a typo/incomplete question. Can you update it? – jsejcksn Mar 18 '23 at 13:49
  • hi @jsejcksn ready, I updated, thank you in advance –  Mar 18 '23 at 13:54
  • See https://stackoverflow.com/questions/21557803/difference-between-inline-box-and-atomic-inline-box?rq=1 – ed2 Mar 18 '23 at 13:56
  • Does this answer your question? [Difference between inline box and atomic inline box](https://stackoverflow.com/questions/21557803/difference-between-inline-box-and-atomic-inline-box) – jsejcksn Mar 18 '23 at 14:24

1 Answers1

1

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

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • HI @Alohci in the div you put "*creates a block box and a root inline box*", it is for when the block container has `inline elements` and `block-level elements`, right? –  Mar 18 '23 at 15:52
  • I don't understand that part as the div only has `inline` elements @Alohci –  Mar 18 '23 at 15:55
  • @GeorgeMeijer - The div will establish an inline formatting context and create a root inline box only if it has inline-level elements and no block level elements. If the div contains both inline level elements and block level elements we get a more complex arrangement where the div creates additional anonymous block boxes to contain the inline level elements. – Alohci Mar 18 '23 at 16:26
  • Hi @Alohci +1. So, in this example you put, the `span` and the `img` are `inline boxes` because they participate in the inline formatting context **that is containing them**, since the `div` creates an inline formatting context because there are only `inline-level elements`, right? –  Mar 25 '23 at 19:39
  • that is, the `div` is creating an inline formatting context, right? @Alohci –  Mar 25 '23 at 19:41
  • 1
    @GeorgeMeijer - Yes. Although if we're being really precise we should be careful about referring to formatting contexts _containing_ boxes. A formatting context isn't really an area of the canvas in which boxes are painted, but a _set of rules_ that control how the descendant boxes are laid out. The distinction usually doesn't matter, but I have known it to cause confusion, and since you highlight those words, I think it's worth mentioning. – Alohci Mar 25 '23 at 19:52