CSS消除元素之間的間距

問題描述

將元素的 padding、margin、border都設置為 0 后，兩個元素之間依然有間距。
代碼如下：

html
<div class="container clearfix">
	<main>
		...
	</main>
	<div class="sidebar">
		...
	</div>
</div>

css
main {
 width: 62.5%;
 display: inline-block;
 padding: 0;
 margin: 0;
 border: 0;
}

.sidebar {
 width: 35.5%;
 display: inline-block;
 vertical-align: top;
 padding: 0;
 margin: 0;
 border: 0;
}

效果如下：

解決方案

設置 container 的 letter-spacing 為 -0.5em，main 和 sidebar的 letter-spacing 為 0，css代碼如下：

.container {
 letter-spacing: -0.5em;	// 添加的代碼
}

main {
 width: 62.5%;
 display: inline-block;
 padding: 0;
 margin: 0;
 border: 0;
 letter-spacing: 0;			// 添加的代碼
}

.sidebar {
 width: 35.5%;
 display: inline-block;
 vertical-align: top;
 padding: 0;
 margin: 0;
 border: 0;
 letter-spacing: 0;			// 添加的代碼
}

設置后的效果如下：

參考資料

1. inline-block元素默認間距的兩種清除方法示例代碼