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.

`.two` takes up the full width since it's a block element, therefore no other elements can be on the same line. It basically has nothing to do with inline-block, but with `block` which is the default display value for divs. — Patrick, May 12 '15 at 18:07
Your title doesn't seem to match your question. In any case, the answer to the title is "any element", as CSS does not discriminate between elements (implementation restrictions notwithstanding). — BoltClock, May 12 '15 at 18:18

BoltClock · Answer 1 · 2015-05-12T18:22:58.350

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.

Oriol · Accepted Answer · 2015-05-12T18:42:29.847

4

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 (e.g., 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 (e.g., 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

edited May 12 '15 at 18:42

answered May 12 '15 at 18:26

Oriol

274,082
63
437
513

3

+1 for 9.2.1.1 - it is most directly relevant here. Element one lives in a line box within its own anonymous block box, and elements three and four in a line box in a second anonymous block box after element two. This is the technical explanation for why an in-flow block-level box is vertically separated from surrounding line boxes. – BoltClock May 12 '15 at 18:31
2

@BoltClock I have included an image to illustrate it better. Using [freehand rectangles](http://meta.stackexchange.com/a/19775/195099), of course :D – Oriol May 12 '15 at 18:45
Can you tell me why those two examples have different result: `http://jsfiddle.net/Wt4hP/328/` and `http://jsfiddle.net/8601tnpc/`. Because as I use css, they're both `inline-block-inline` respectively, but they render different. thanks :) – Trần Kim Dự May 12 '15 at 19:30
2

@TrầnKimDự They are different because the paragraph is not closed until the end. See [this](http://jsfiddle.net/8601tnpc/1/). – Oriol May 12 '15 at 19:33
@Oriol. Ah. thanks. I understand this point. Can you tell me any spec about container is `inline-block`. I see the result mostly likes as `block` except that border of all elements always on its own (element can be `inline-block` or `block`). For example this link: `http://jsfiddle.net/qh4e99hc/` I see that margin doesn't work here, too. thanks :) – Trần Kim Dự May 12 '15 at 19:48
1

@TrầnKimDự Margin works, but you don't see it because the background affects the container too: http://jsfiddle.net/qh4e99hc/1/ – Oriol May 12 '15 at 20:34
@Oriol ah. yes :D But the background of class `two` aren't span over a row (as if we change container again to `block` instead of `inline-block`). Can you explain this effect,please ? – Trần Kim Dự May 12 '15 at 22:29
1

@TrầnKimDự Because since the container is inline-block, its width will be minimal (but wide enough to fit the contents). The block child will grow to fill container's width. If the container were block, it would fill the supercontainer, and the block child would fill the container. – Oriol May 12 '15 at 23:13
@Oriol ah. I'm understand now. Thanks for supporting me those knowledge. I think I hardly to find elsewhere. thanks :D – Trần Kim Dự May 13 '15 at 10:03

score 0 · Answer 3 · answered May 12 '15 at 18:13

0

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.

answered May 12 '15 at 18:13

t--r--o--n

31
4

To which element does inline-block apply?

3 Answers3

Linked