What is an anonymous inline box?

user_18337193 0
Viewed 97

A website was explaining about something called an "anonymous inline box" and has this example:

<p> Some <em> emphasize </em> text </p>

The block-level box generated by the p element only contains inline elements. The inline box of the text "emphsize" is formed by the <em> tag, so it is not an anonymous box, and the text "Some" and "text" do not have corresponding tags to wrap them, so Surrounding them is the anonymous inline box.

Can I say that any text that is not wrapped inside the tags are anonymous box or is it just true for this situation?

I would appreciate if you could help me understand it a little better.

css html
1 Answers

So the text your read comes from https://www.w3.org/TR/CSS2/visuren.html#anonymous

9.2.2.1 Anonymous inline boxes
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

In a document with HTML markup like this: <p>Some <em>emphasized</em> text</p> the <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent.

White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.

If it is clear from the context which type of anonymous box is meant, both anonymous inline boxes and anonymous block boxes are simply called anonymous boxes in this specification.

There are more types of anonymous boxes that arise when formatting tables.

p {
  background-color: red
}

em {
  background-color: yellow
}
<p> Anonymous inline box #1 <em> inline emphasized box </em> Anonymous inline box #2 </p>

user_2957830
Related