在inline-block的div中添加p元素导致下移

根据这篇文章css中inline-block出现下移的情况 - 青竹玉简 - 博客园，知道：

查阅了相关资料发现，在将元素display设置为inline-block的时候，元素即同时具有内联元素和块级元素的属性，既排列在同一行又可以设置宽高。

对于内联元素，都具有vertical-align属性，那这里就牵涉到vertical-align的默认对齐方式。 它的默认方式是baseline，基线对齐。基线指内容的下边缘

第一个div里有元素，基线为元素也就是p元素的下边缘，第二个div内没有元素，默认的基线是margin下边缘，那么怎么解决这个问题，让div并排对齐？改变vertical-align默认对齐方式就可以了，在这里将其设置为top，效果如下：

---

另一种解决方式：

设置属性 overflow:hidden

这种方式来自overflow:hidden 影响inline-block元素周围元素下移_anruanba4181的博客-CSDN博客

原因：

vertical-align的默认值是baseline。当div1 设置了属性overflow:hidden后，baseline会设置在bottom margin的边缘。详情戳css规范。

规范的截图：

翻译：'inline-block'（盒）的基线是它的最后一个常规流中的行盒的基线，除非它没有流内行盒或者它的'overflow'属性的计算值不为'visible'，此时基线是bottom margin边。

所以div2的文字和div1的下边框对齐。

注意：如果元素内部只有脱离常规流的行盒,如被设置了float 除了none以外的值，position为fixed和absolute，也会出现同样的情况