Remove unwanted margin due to line-break in HTML - css

Question

I get an unwanted margin between block1 and block2 with display: inline-block style. See this jsFiddle.
HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
background-color: #f00;
width: 100%;
height: 200px;
}
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
}
The margin disappears when I change the HTML to this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><div id="block2">
block2
</div>
</div>
</div>
or this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><!--
--><div id="block2">
block2
</div>
</div>
</div>
While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in innercontainer. Also note that I want to avoid setting float: left; on both block1 and block2 or making them floating by position: absolute|relative because that generates other problems in my layout. Any ideas?
EDIT
Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see jsFiddle). I am now using float: left and will have to figure out how I can add a div that consumes the free-space on the right.

Answer 1

Update this part of css :
#block1, #block2 {
display: block;
float: left;
background-color: #00f;
height: 200px;
}
When you are inline, spaces take space!
EDIT :
To be safe change this part of HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
<div style="clear: both"></div>
</div>

Answer 2

If you want to use display: inline-block;. You need to close gap between tags like you mention. Because The it self are treated as inline-elements also. When you have a space or line-break between two tags would create a gap between them.
You can fix this by set font-size of a surrounding container to 0 and set them back in child node.
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
font-size: 0px;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
font-size: 15px;
}
http://jsfiddle.net/SbUwt/27/