div inline-block元素在插入另一个元素时会中断

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。

  

将框的基线与父框的基线对齐。

     

＆＃39;内联块的基线＆＃39;是正常流程中其最后一个行框的基线，除非它没有流入的行框或者它的溢出＆＃39; property具有除＆＃39; visible＆＃39;之外的计算值，在这种情况下，基线是底边距边缘。

当您添加<p>标记时，它将成为对齐的基线。您可以指定其他值：

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

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