輸入元素的邊距和位置

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/