CSS 技巧篇(八):display设置元素为inline-block,底部无故出现空白

2,707 阅读1分钟

一、问题描述

当我们将几个元素设置为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;
}