To which element does inline-block apply?

Question

I'm studying inline-block attribute and know that it helps elements on same row (instead on each row as normal). But I don't know how inline-block works.

Does inline-block element X will makes X same line with previous element or will make next element same line with X.

For example below code:

 div { background: #eee; color: black; margin: 10px; } .one { display: inline-block; } 

 <div class="one">One</div> <div class="two">Two</div> <div class="one">Three</div> <div class="one">Four</div> 

I run and see the result is: one is on one line (but wrap), two is on new line (without wrap), and three and four on same line (but different with two). I cannot explain. Please tell me why they behave like this.

Answer 1

inline-block places the element on a line box. Where exactly this line box is rendered depends on, among other things, the surrounding elements as well as the size of the container.

A block-level element will be vertically separated from any line boxes unless it is floating (in which case it will sit next to the line box if there is enough space to do so). This is because line boxes are strictly an inline layout concept and do not exist in block layout, and block-level elements are laid out vertically in normal flow. This is why element two is on its own line.

Elements three and four have no block-level element separating them, and will therefore appear on the same line box (unless they need to wrap), after element two. They behave much like two separate words in a phrase in this regard.

Unfortunately I'm not aware of any good references that describe the interaction between both block layout and inline layout. The next best thing is section 9.4 of CSS2.1 , which describes normal flow, but being a technical specification I suspect most authors would have difficulty relating much of its text to this example.

Answer 2

From the spec

§9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (eg, emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

§9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (eg, paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

Block-level boxes are boxes that participate in a block formatting context . Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

When you mix block-level and inline-level boxes inside a block container box, then anonymous block boxes will be generated:

§9.2.1.1 Anonymous block boxes

In a document like this:

 <DIV> Some text <P>More text </DIV> 

(and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

^{Diagram showing the three boxes for the example above}

Diagram showing the three boxes, of which one is anonymous, for the example above.

In other words: 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.

In your example, it would be something like

Answer 3

div is a block level element by default. .two is the only div that doesn't have display:inline-block applied to it and is therefor display:block by default. This is why it appears as it does.