inline-block div壓縮文本

今天早上我發現了一個奇怪的CSS問題，我希望CSS專家能夠幫助我。在this demo中，爲什麼紅色格中的文本會將其推倒？我預計這兩個div將會彼此相鄰。謝謝！
編輯：謝謝你們的答案。我會稍微接受一個答案。任何人都可以解釋爲什麼會發生？inline-block div壓縮文本

2012-10-10 Abraham

...........................

嗨現在用於vertical-align: top;

div { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    vertical-align: top; 
}

Demo

2012-10-10 11:48:38

你能解釋爲什麼你沒有使用float：left，這是一個乾淨的解決方案。 – freebird

是的，我認爲這是最好的解決方案。謝謝！ :)你知道爲什麼文字引發這個問題嗎？ – Abraham

你可以用來顯示內聯塊，這意味着如果你在任何html元素中定義了顯示內聯塊元素，這意味着通過內聯塊是基線而不是定義爲總是垂直對齊頂部。 –

-2

添加float:left解決了這個問題。

2012-10-10 11:47:22 freebird

我想知道爲什麼這樣用文本工作會很有趣。 –

@TimotheeTosi我注意到了，我不知道爲什麼，你能不能讓我知道。謝謝。「 – freebird

」內聯塊告訴瀏覽器將內聯元素放置，但將其視爲塊級元素。「所以你可以漂浮它！ http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/ – BenRacicot

回答