DIV內聯塊元件打破插入另一元件內部

Question

時確定這是一種奇怪的我有下一個代碼

<div> 
    <p>hi</p> 
</div> 
<div></div> 
<div></div> 
<div></div> 

div { 
    width: 200px; 
    height:200px; 
    background: red; 
    display: inline-block; 
} 

第一個div斷裂脫節。爲什麼？ 我知道我可以用垂直對齊或溢出來修復它。但爲什麼這是從一開始就發生的？

鏈路： http://codepen.io/sergelerner/full/wKvsy

Answer 1

用於內聯塊元素的默認vertical-align是baseline。

將框的基線與父框的基線對齊。

「內嵌塊」的基線是其正常流程中最後一行框的基線，除非它沒有任何流入線框，或者其「溢出」屬性的計算值不是「可見「，在這種情況下，基線是底部邊緣。

當您添加<p>標記時，它將成爲對齊的基線。您可以指定其他值：

div { 
vertical-align:middle; 
/*or*/ 
vertical-align:top; 
} 

演示http://codepen.io/anon/pen/bcnDB