兩個盒模型之間的空隙

html文檔中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其佔用空間，這個模型稱爲盒模型。盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域），這個大家都知道，那什麼是兩個盒模型之間的空隙呢？該怎麼清除它呢？

假設有一個class爲content的父div，裏面包含兩個子div，這兩個子div要同一行顯示，我們想要兩個子div緊緊連接在一起，所以把它們的margin和padding值全部設爲0。

<style type="text/css">
	.red{
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 100px;
		height: 100px;
		background: red;
	}
	.green{
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 100px;
		height: 100px;
		background: green;
	}
</style>

<div class="content">
	<div class="red"></div>
	<div class="green"></div>
</div>

我們來看看結果

這時我們發現結果沒有我們想象中那麼美好，這是因爲兩個div之間還有些空白字符。我們有兩種解決方法：

既然是空白字符的鍋，我們就在父元素設置他們的font-size爲0，或者，直接把空白字符刪掉

1.方法一：font-size設爲0

我們把父元素的font-size設置爲0

.content{
	font-size: 0px;
}

這時的效果還不是我們想要的，因爲我們會發現子元素裏面的字消失了。

這是因爲子元素沒有設置的樣式會默認繼承父元素的，所以我們在兩個子元素設置相應的font-size就可以了，瀏覽器默認爲16px

.content{
	font-size: 0px;
}
.red{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100px;
	height: 100px;
	background: red;
	font-size: 16px;
}
.green{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100px;
	height: 100px;
	background: green;
	font-size: 16px;
}

現在的結果就完美了

2.方法二：刪除空白字符

這種做法雖然相對來說比較方便，但是個人特別不推薦這種做法，因爲會影響我們對代碼的閱讀

<div class="content">
	<div class="red">空白</div><div class="green">字符</div>
</div>

想象一下如果我們要做的不止一個盒子呢？看起來會特別亂，不利於後期維護，雖然說結果是一樣的