CODEWITHSUNDEEP
htmlcsscss-float
leetom
leetom

Reputation: 763

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

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.

http://jsfiddle.net/r2LLzwbu/1/

Upvotes: 1

Views: 191

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

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;

DEMO

Upvotes: 0

Ravi Khandelwal
Ravi Khandelwal

Reputation: 726

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

Fighting the Space Between Inline Block Elements

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.

Upvotes: 1

Renzo Poddighe
Renzo Poddighe

Reputation: 368

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>

it works. Updated Fiddle.

Upvotes: 1

Related Questions