输入元素的边距和位置

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/