一、问题描述
当我们将几个元素设置为inline-block的时候,元素的底部会无故出现几个像素的空白。
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
</div>
<style>
.parent{
width:300px;
border:1px solid black;
}
.child{
background-color:red;
display:inline-block;
width:100px;
height:100px;
}
</style>
二、解决方案
inline-block默认以底部为准对齐,使用vertical-align:top;将以顶部为准对齐,可以消除底部空白。
.child{
vertical-align:top;
}