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

13407043-a7bc40f94bbb543a.png

代码：

html：

1
2
3
4
5
<div id="box">
    <div class="content1"></div>
    <div class="content2"></div>
 </div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#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出现了下移，如图：

13407043-5d04c27cf4be0f8e.png

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

1
2
3
4
5
6
7
<div id="box">
    <div class="content1">
      <p>11111</p>
    </div>
    <div class="content2"></div>
</div>

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

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

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

13407043-07df54a0b25b05ed.png