html去不了边距,删除因HTML中的换行而导致的不需要的边距

我在block1和block2之间获得了display: inline-block样式的不必要的保证金。请参阅此jsFiddle。

HTML

block1

block2

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;

}

当我将HTML更改为此时，边距消失了：

block1

block2

或者这个：

block1

block2

虽然我更喜欢后者，但我仍然想知道是否有人知道解决方案以便我可以使用原始HTML，但innercontainer中没有空格显示。另请注意，我希望避免在float: left;和block1上设置block2或使其position: absolute|relative浮动，因为这会在我的布局中产生其他问题。有什么想法吗？

修改

好的，所以我的布局遇到了更多麻烦。当我向block1添加一个图像时，整个块向下移动，非常奇怪(见jsFiddle)。我现在正在使用float: left，并且必须弄清楚如何添加消耗右侧自由空间的div。