Ghost space between inline-block elements in Chrome, Safari and Firefox [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
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;
}
​

Answer 1

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/

Answer 2

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!