Inline anonymous boxes?

Question

I have question on this content sitepoint link

Following markup is rendered as block + inline + block

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p>

Chrome:

In 1912, - display: block
<em>Titanic</em> - display:inline
 sank on her maiden voyage. - display:block

Sitepoint link says 2 anonymous boxes (1st and 3rd) should be inline to keep all boxes same inside p. But chrome renders boxes inside p as mix of block and inline.

As per CSS3 box model

block-level box may contain either line boxes or block-level boxes, but not both. If necessary, any line boxes that belong to this box's element are wrapped in one or more (as few as possible) anonymous boxes with a ‘display’ of ‘block’.

According to W3C recommendation sitepoint content seems correct but I'm getting mix of boxes inside block-level box(p) on chrome.

Again one point of recommendation says anonymous boxes should be block only which contradicts the sitepoint material.

As per CSS3 box model

Note that the anonymous boxes defined in this module are all block-level, but anonymous boxes defined in other modules may be different.

My question is:

1) Should all 3 boxes be inline?(Browser renders block+inline+block)

2) Is inline anonymous box mentioned in W3C standard?

Answer 1

Section 9.2.2.1 in the Visual Formatting Model actually has an almost identical example to yours, e.g.

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.

What you're seeing in Chrome's developer tools is the display value for the element that the anonymous boxes lives in, not of the inline boxes themselves. They're all actually inline boxes, but "In 1912" & "sank on her maiden voyage" would be anonymous while the <em> element would create a non-anonymous inline box as it is an inline-level element.

Answer 2

The text before and after the em element are wrapped in anonymous inline boxes.

If you see in this fiddle, all the text is shown inline on one line. The em is an inline element, "In 1912, " is wrapped in an inline anonymous box, as is " sank on her maiden voyage."

The debugger will say the p element is display: block as it is. The debugger doesn’t show anonymous boxes however, so you will not see that the text before and after the em are actually inline. You can see it though, as if they were display: block they would be the width of the element, and push the em onto a new line.

Anonymous inline boxes are mentioned in the spec here: http://www.w3.org/TR/CSS2/visuren.html#anonymous