Ghost space between inline-block elements in Chrome, Safari and Firefox
css, html
Solution
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/
Problem
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; } ```