Some space between elements without any reason I can figure out - html

Question

<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
TEXT TEXT TEXT
</div>
This is HTML structure of related to issue document.
CSS:
#colorscheme{
width:25%;
display:inline-block;
height: 50px;
background:green;
}
#content{
width:50%;
display:inline-block;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
JSfiddle
As you can see from the feedle, there is some space between #colorscheme and #content, despite there is no margins, and there is border-box property. How can I reduce it?

Answer 1

Inline block can cause whitespace issues and I would recommend floating the elements.
Have a look at this forked example - http://jsfiddle.net/DkhDm/1/
It's also worth noting that display inline-block lacks support in some browsers - which is another reason to always use floats ahead of it! You do however have the small added complication of clearing the floats but this is easily achieved.
#colorscheme{
width:25%;
float: left;
height: 50px;
background:green;
}
#content{
width:50%;
float: left;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}

Answer 2

It's just whitespace, which is logical because you've reduced your blocklevel elements to inline blocks explicitly. Eliminate the whitespace and it'll go away:
<div id="colorscheme"></div><div id="content"><div id="display_saved">TEXT TEXT TEXT </div></div>

Answer 3

DEMO
CSS:
#colorscheme{
width:25%;
display:block;
height: 50px;
background:green;
float:left;
}
i have added float:left; and changed to display:block;

Answer 4

You can move the elements back into place with negative 4px of margin. (Not in IE6,7). inline-block do cause whitespace, i don't think it's a bug and it's rather nice to have when using inline-block on text-elements.
#colorscheme{
margin-right: -4px;
width:25%;
display:inline-block;
height: 50px;
background:green;
}

Answer 5

You can also use html comments to eliminate the whitespace.
<div>
<p>Content</p>
</div><!--
--><div>
<p>More content</p>
</div>