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?

http://stackoverflow.com/q/18987811/34397 http://stackoverflow.com/q/7432483/34397 http://stackoverflow.com/q/16678929/34397 http://stackoverflow.com/q/16935922/34397 http://stackoverflow.com/q/11982197/34397 — SLaks, Dec 29 '13 at 14:23
possible duplicate of [A Space between Inline-Block List Items](http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) — SLaks, Dec 29 '13 at 14:23

score 2 · Answer 1 · answered Dec 29 '13 at 14:28

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>

score 0 · Answer 2 · answered Dec 29 '13 at 14:26

0

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

DEMO

answered Dec 29 '13 at 14:26

Itay Gal

10,706
6
36
75

score -1 · Answer 3 · answered Dec 29 '13 at 14:25

-1

Add this css style to your seccond div

margin:0 0 0 -6px;

jsFiddle

answered Dec 29 '13 at 14:25

Florin

5,781
2
20
30

Divs with display inline-block

3 Answers3