Divs with display inline-block

Question

I have two similar divs which are beside each other. But there is white space in between which I cannot remove?

My html as below

<div class="model-box" style="background-color:red;display:inline-block;width:98px;height:30px;">   
</div>
<div class="model-box" style="background-color:red;display:inline-block;width:98px;height:30px;">   
</div>

the fiddle as below

http://jsfiddle.net/xJW7G/

Why is this so?

Thanks in advance for the help?

Answer 1

It's because of the white-space character in between the divs, you could just get rid of it, see: http://jsfiddle.net/xJW7G/1/, or comment it out e.g.

<div class="model-box" style="background-color:red;display:inline-block;width:98px;height:30px;">   
</div><!--
--><div class="model-box" style="background-color:red;display:inline-block;width:98px;height:30px;">   
</div>

Answer 2

Yuo might want to use float: left; instead of display: inline;

DEMO

Answer 3

Add this css style to your seccond div

margin:0 0 0 -6px;

jsFiddle