Anonymous boxes are defined as:
- Any content that inside a block level parent element, but only content that is not wrapped directly inside another element
- There is either one or more block level element or one or more inline element present inside the parent element.
In the example below, the "some text" is defined as an anonymous box:
<div>
Some text
<p>Paragraph</p>
</div>
In the example below, the "some text" is NOT defined as an anonymous box as there are no other elements present inside the parent element:
<div>
Some text
</div>
Types of anonymous boxes
There are two types of anonymous boxes; anonymous block boxes and anonymous inline boxes. Whether the anonymous boxes are inline or block is determined by what types of elements are also inside the parent element.
Anonymous block boxes
In the example below:
- The parent element, the <div>, is a block level box
- The <p> elements are block level element.
- The <em> element is an inline element
<div>
Some text
<p>Paragraph</p>
Some text
<p>Paragraph</p>
<em>some emphasis text</em>
</div>
If there is one or more block level elements inside the block level parent element, then any content that is not wrapped in an element would be an "anonymous block box" - regardless of whether there are also inline elements present as well.
The two instances of "Some text" are not wrapped inside any element - therefore they are anonymous boxes. As there are block level elements inside the parent, these instances of “some text” are anonymous block boxes
Anonymous inline boxes
In the example below:
- The parent element, the <div>, is a block level element
- The <em> and <b> elements are inline elements
<div>
Some text <em>emphasis</em> Some text <b>bold</b>
</div>
If there are only inline elements inside the block level parent element, then any content that is not wrapped in an element would be an "anonymous inline box".
The two instances of "Some text" are not wrapped inside any element - therefore they are anonymous boxes. As there are only inline elements inside the parent, these instances of “some text” are anonymous inline boxes