Why `inline-block` is still moved to next line even the width is just the same (or a little bit smaller)

Question

As shown in the example, the two of 150px divs won't stay in the 300px parent div even if I set them as inline-blocks.

Why would they occupy extra space?

There is no problem when using float:left.

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Hidden Hobbes, Sep 25 '15 at 07:30
You will find your answer in the link above. For future reference please include your code in the question itself. A JSFiddle alone is not suitable as the link may die making the question useless. — Hidden Hobbes, Sep 25 '15 at 07:33

score 1 · Answer 1 · answered Sep 25 '15 at 07:32

1

The problem is the indentation causes extra spaces to appear in the div. To illustrate, if you change the HTML to a single line:

<div class="outer"><div class="inner-1"></div><div class="inner-2"></div></div>

answered Sep 25 '15 at 07:32

Renzo Poddighe

score 1 · Answer 2 · answered Sep 25 '15 at 07:33

Chris Coyier explains this very well in one of his post here -

To summarize what Chris said -

The inline blocks are similar to independent words in a sentence. Inline-block carries the space in between them the way words do in a sentence.

score 0 · Answer 3 · answered Sep 25 '15 at 07:36

0

you can do this :

.inner-1{
    background:green;
    width:150px;
    height:100px;
    margin:0;border:0;padding:0;

}

Remove .inner-1 css display:inline-block;

answered Sep 25 '15 at 07:36

Ivin Raj

I think you may have misunderstood the question. The OP is asking why `inline-block` forces the blocks onto separate lines. – Hidden Hobbes Sep 25 '15 at 07:51

3 Answers3