Why the space between divs when using display: inline-block

Question

Why is an empty space between divs when using display: inline-block, like in this example: http://jsbin.com/IhULuZO/1/edit.

I know I can use float:left, but I want to get rid of the empty space without floating elements if possible.

may be [this](http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin) and [this](http://stackoverflow.com/questions/14241696/how-to-get-rid-of-space-between-divs-when-display-inline-block-and-stacked-horiz) can help you.. — Sohail, Oct 31 '13 at 10:06

score 8 · Accepted Answer · edited Oct 31 '13 at 11:16

8

Because the indentation of your code technically is a bunch of whitespace.

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

edited Oct 31 '13 at 11:16

slugster

answered Oct 31 '13 at 10:04

nicks

score 2 · Answer 2 · answered Oct 31 '13 at 10:05

there is that space between those divs to make them more readable. To delete these spaces, comment all the space in html like this :

  <div class="parent">
    <div class="child"></div><!--
    --><div class="child"></div><!--
    --><div class="child"></div>
  </div>

score 1 · Answer 3 · edited Oct 31 '13 at 11:19

1

It is happening because you have written .child divs on separate lines. If you write them on same line, extra space will be removed.

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>

edited Oct 31 '13 at 11:19

slugster

answered Oct 31 '13 at 10:05

Hiral

score 1 · Answer 4 · edited Oct 31 '13 at 11:14

1

You should remove the space between .child divs and Code Should Appear Like these.

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
 </div>

edited Oct 31 '13 at 11:14

slugster

answered Oct 31 '13 at 10:41

4 Answers4