4

How can I remove the ghost space between inline-block elements?

Here is a jsfiddle http://jsfiddle.net/hFDcV/ where you can clearly see a horizontal space between the divs.

And the StackOverflow mandated example code:

<div id='row'>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
</div>

#row {
  background-color: red;
}

.box {
  width: 150px;
  height: 150px;
  background-color: yellow;
  display: inline-block;
  margin: 0;
  padding:0;
}

​

stuartrexking
  • 657
  • 5
  • 12

2 Answers2

4

One solution: http://jsfiddle.net/hFDcV/4/

Set the font-size of the parent container to 0 and reset it on the child elements.

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

Another solution: http://jsfiddle.net/hFDcV/10/

You can float the box elements left. Setting overflow:hidden; on the row will prevent it from collapsing to 0 height.

#row {
    overflow:hidden;
}

.box {
    float:left;
}

There are other solutions in the fantastic article on this problem shared by @RickCalder: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Shmiddty
  • 13,847
  • 1
  • 35
  • 52
  • Setting font-size to 0 works. Getting rid of the spaces does as well. http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – stuartrexking Nov 27 '12 at 17:45
  • @stuartrexking Yes, that is actually how I discovered the problem, but it's generally undesirable to muck up the HTML in such a manner. – Shmiddty Nov 27 '12 at 17:47
1

One easy way to achieve this is to insert commentary between inline-block elements!

like this : 

<div id='row'>
  <div class='box'>Something</div><!--
  --><div class='box'>Something</div><!--
  --><div class='box'>Something</div><!--
  --><div class='box'>Something</div>
</div>

Hope this helps someone!

Rum Jeremy
  • 502
  • 4
  • 15