An element generated box, beside being initially formed as a block-level or inline-level box, might end up being a box called anonymous block or inline box, respectively.

Anonymous boxes are formed when there is a text body (text node) created inside a parent element and before another element that is a child of the previous parent element. Whether it is going to be called anonymous block or anonymous inline box dependes on the parent element being formed as a block or inline generated box, in respected order.

Examples of anonymous block box

Example #1:

<div>

Main block text ...

<p>Paragraph text ...</p>

</div>

If both, <div> and <p> tags are blocks (display: block), it is assumed that, although the <div> element has some inline content and block content, all the content inside is rendered as the block thus making the undefined text content before the child element an anonymous block box.

Example #2:

p { display:inline; }

span { display:block; }

<p>Paragraph text ... <span>span text</span></p>

In case of the parent element being rendered as an inline-block box but the child element being a display: inline, then all the anonymous content will also be anonymous block box.

Examples of anonymous inline box

Example:

<p>Paragraph text ... <i>italic text</i></p>

Any text found inside a containing block element with a child being rendered as an inline-level will be treated as anonymous inline box.

Both, block-level and inline-level anonymous boxes, inherit all inheritable properties from their parents and these that are not inheritable, will be set to their initial values.

Beside mentioned types of anonymous boxes, there are also anonymous box types existing when formatting tables.

 

›› go to examples ››