Inline- and block-level boxes inside the block-container box

Question

In the CSS spec in sec 9.2.1 said:

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Consider the markup:

<div id="d">
    <div>Anonymous text</div>
    <span>Some text</span>
    <span>Another some text</span>
    <div>Another anonymous text</div>
</div>

and styles:

div#d{
    width: 300px;
    height: 300px;
    background: aqua;
}

In my case div#d contains block-level and inline-level boxes. But in the sec. 9.2.1.1 said that

if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

Q: Why we can put inside the block-level element (e.g. div) both inline and block elements and they will displayed as inline and block element, but in spec said that block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

I'm confused. Can you dispel my doubts?

From what i understand: the specs say that if a box contains a mix of inline and block elements then inline elements are wrapped in an anonymous block to satisfy the "only block or only inline" clause. — Salman A, Feb 04 '14 at 11:23

Faust · Answer 1 · 2014-02-04T11:25:11.137

4

The spec goes on to say:

The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes

So the inline elements are wrapped in "anonymous blocks" (generated by the CSS engine in the browser, and invisible to your DOM inspector), that are block-level, and all children of the container are therefore block-level, instead of a mix of block- and inline-elements.

edited Feb 04 '14 at 11:25

answered Feb 04 '14 at 11:20

Faust

15,130
9
54
111

1

But why this anonymous blocks doesnt starting with a new line? [jsFiddle](http://jsfiddle.net/z8BSs/6/) . – Feb 04 '14 at 11:28
2

That will depend on the styling -- the divs, perhaps, are floated? If the first div is floated, it will sit alongside the spans. the spans, themselves, are both enclosed in 1 anonymous block (if I've read the spec correctly), so there's no problem with them running together inline. – Faust Feb 04 '14 at 12:52

Inline- and block-level boxes inside the block-container box

1 Answers1

Linked