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-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内的元素基线变了