css元素设置 display:inline-block出现对不齐问题

问题描述

两个div属性都是display：inline-block;但是一个有内容一个没有内容 为什么会出现高低不平的现象？
看效果~

.div-3, .div-4 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;

}
.div-3 a, .div-4 a {
    color: #fff;
}

div-2

.div-1, .div-2 {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    background: #003366;
    text-align: center;
    vertical-align: top;
}
.div-1 a, .div-2 a {
    color: #fff;
}

解决方法是给inline-block元素添加vertical-align:middle or top or bottom

造成原因是inline-block内的元素基线变了