div使用display: inline-block排列，填充内

首先看示例代码：

<div class="test-div">测试数据</div>
<div class="test-div"></div>


.test-div{
   display: inline-block;
   margin-left: 20px;
   width: 100px;
   height: 100px;
   border: #19be6b 2px solid;
 }

效果如下，填充内容后两个div发生错位：

解决办法：在div的样式中加上vertical-align: top;

.test-div{
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  border: #19be6b 2px solid;
}

效果：