css中inline-block出现下移的情况

在包裹层里嵌套的两个div设置display: inline-block时，正常情况下两个div会并排显示，如图

image.png

代码：

html:

css:

#box {
      width: 300px;
      height: 300px;
      border: 1px solid red;
      padding: 20px;
      margin: 50px;
    }

    .content1 {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid blue
    }

    .content2 {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid blue
    }

但是如果在其中一个div里面加上一些内容，神奇的事发生了，第一个div出现了下移，如图：

image.png

这块我只在html代码加了p标签

    

      
11111
    
    

  

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

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

image.png

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

image.png

参考文章：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/