行內元素對齊：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;
}

div-1 div-2

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

形成緣由是inline-block內的元素基線變了