CSS 技巧篇(八)：display設置元素爲inline-block，底部無端出現空白

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>
複製代碼

2、解決方案

inline-block默認以底部爲準對齊，使用vertical-align:top;將以頂部爲準對齊，能夠消除底部空白。

.child{
	vertical-align:top;
}
複製代碼