內嵌塊div的大型空白空間

Question

我試圖通過使用內聯塊並排放置兩個div。出於某種原因，我在其中一個div上看到了很大的空白空間。

我在http://codepen.io/weima/pen/eKEbD

有問題的格創建的筆是具有類。輸入區域。如果我從.input-area css中刪除display:inline-block，那麼空的空間就會消失，但是我不能將這兩個div並排放置。

有沒有辦法解決這個問題，而不使用float？

Answer 1

你可能添加到vertical-align:top爲了解決對齊問題。

UPDATED EXAMPLE HERE

.input-area { 
    vertical-align: top; 
    display: inline-block; 
    width: 450px; 
    border: 1px solid green; 
} 

默認值的vertical-align屬性爲baseline。如果你對這件事感到好奇，看看this answer。