inline-block elements are line breaking for seemingly no reason?

Question

I have some pretty basic HTML/CSS that isn't working as I expect. Basically I have my body setup to be 400px wide. I then have two divs inside of the body with explicit widths of 300px and 100px. Additionally, both of these divs are set to display: inline-block. For some reason, the 100px div breaks out of the body's content area and appears below it. I don't know why this is happening. If I set the width from 100px to 96px, it works. However, if I set it to 97px, 98px, 99px, or back to 100px, it doesn't work. I find this behavior very odd. Can someone explain what is going wrong?

Note that I am testing this on Chrome (Beta Channel). Code is below.

The CSS:

body {
    margin: 4px;
    width: 400px;
    height: 250px;
    border: 1px solid black;
}

.list-container {
    display: inline-block;
    width: 300px;
    height: 100%;
    background-color: red;
}

.button-container {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: blue;
}

The HTML:

<body>

<div class="list-container">
</div>

<div class="button-container">
</div>

</body>

Have you tried setting `margin: 0; padding: 0` for both elements? Do they have any `border`s set? — David Thomas, Jun 08 '11 at 20:34
@David: I checked in chrome developer tools and I don't see any padding, border, or margin for either of these Divs. Additionally, the final computed CSS doesn't seem to include anything unexpected. — void.pointer, Jun 08 '11 at 20:35
Although this will probably not solve your problem, it's more common to see those two elements floated rather than positioned using inline-block. — Wex, Jun 08 '11 at 20:37

score 13 · Accepted Answer · answered Jun 08 '11 at 20:43

13

It's because of the way white-space collapses in html.

If you remove the line-breaks from between the two div elements, everything's fine:

<div class="list-container">
</div><div class="button-container">
</div>

JS Fiddle demo.

You could, also, just comment-out the between divs:

<div class="list-container">
</div><!--

--><div class="button-container">
</div>

JS Fiddle demo.

Or even set the font-size to zero for the body element (but you'll have to redefine it for the child elements, obviously:

body {
    margin: 4px;
    width: 400px;
    height: 250px;
    border: 1px solid black;
    padding: 0;
    font-size: 0;
}

JS Fiddle demo.

answered Jun 08 '11 at 20:43

David Thomas

249,100
51
377
410

Fascinating - I never knew this happened and have been operating under the obviously mistaken belief that whitespace was ignored. Good to know. – kinakuta Jun 08 '11 at 20:47
4

White-space between `display: block` elements collapses to, essentially, nothing. But between `inline` and `inline-block` elements it collapses to a single white-space character. – David Thomas Jun 08 '11 at 20:48
2

This is great information, thank you. I will use floats instead, as I didn't know inline-blocks were this much of a pain in the rear :) – void.pointer Jun 08 '11 at 20:54
Your JS Fiddle demo give me what i needed: `inline-block`; Thanks. – MarceloBarbosa Feb 05 '15 at 14:50

score 2 · Answer 2 · edited May 23 '17 at 12:33

Another possibility with odd inline-block behaviour in Chrome is if you have text-render: optimizeLegibility set. I was struggling with inexplicable line-breaks in inline block elements in Chrome, and found that removing text-render: optimizeLegibility fixed the problem.

I've had at least one other hard-to-figure-out problem (inexplicable non-rendering of web fonts) that turned out to be caused by optimizeLegibility in the past, so from now on that's going to be a prime suspect when things behave strangely in Chrome.

(nb. Even if you don't think you're using it, if you're using a framework like Twitter Bootstrap you may be using it unwittingly)

This was the cause of the problem for me on an android tablet — DonutReply, Oct 03 '14 at 16:57

score 0 · Answer 3 · answered Jun 08 '11 at 20:39

0

It's the margin in your body:

margin: 4px;

Because the margin counts as part of the total width. 300px for the first one + 100px for the second div + 8px (4 on either side) for the margin = 408px. That forces the second div down to the next line.

I'm actually kind of surprised that it works at 96. It acts like it's only accounting for the margin on one side. I'd expect it to only work at 92 or below. Either way account for the margin size in the width of your body or set the margin to 0 and that should fix the problem.

answered Jun 08 '11 at 20:39

Cfreak

19,191
6
49
60

It's not the `margin`, it's the `white-space` (or, at least, it's potentially the `white-space` *as well*)... – David Thomas Jun 08 '11 at 20:44
I have already tried removing the margin in the body, however this has no affect on the symptoms of the problem. The margin is *outside* of the content area so actually it plays no role whatsoever in this particular scenario. – void.pointer Jun 08 '11 at 20:45
@Robert, see my answer, and JS Fiddle demos. The suggestions work on JS Fiddle, so *presumably* they'd solve your issues too. – David Thomas Jun 08 '11 at 20:47

inline-block elements are line breaking for seemingly no reason?

3 Answers3

Linked