输入元素的边距和位置

Question

我想将一个块分成两个独立的小块。为此，我使用以下HTML：

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
    </div>
</div>

结果：

这是第一个问题：正如您所看到的，两个方框（灰色和绿色）之间仍然可以看到一些（红色）背景。我不知道如何摆脱那个空间 - 两个div元素已经有一个边距，边框和填充为0.当我将绿色div元素的宽度增加到200px时（因为它应该是），元素跳出它的父，因为它变得太大了。

是否存在默认填充或浏览器必须在简单元素之间添加空格的规则？如果是这样，我怎么能摆脱它？

当我向绿色input添加div标记时，会出现第二个问题：

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
        <input type='submit' value='Details'/> <!-- new -->
    </div>
</div>

现在，由于某种原因，绿色div再次被强行关闭：

input元素（以及包含div的扩展名）向下移动到红色div的底部。我发现我可以通过使用position: absolute来阻止它，但我很困惑为什么它的行为完全如此。似乎有一些更微妙的错误，但我不知道是什么。

感谢您的帮助。

Answer 1

而不是display:inline-block使用float

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="float: left; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="float: right; width: 200px; height: 200px; background-color: green;">
        <input type='submit' value='Details'/> <!-- new -->
    </div>
</div>

<强> DEMO

Answer 2

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block;position:fixed; width: 200px; height: 200px; background-color: green;">
          <input type='submit' value='Details'/>
    </div>
</div>

演示： http://jsfiddle.net/hsakapandit/c6AUF/