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

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

 1 <style type="text/css">
 2     .red{
 3         display
 
: inline-block;
 4         margin: 0;
 5         padding: 0;
 6         width: 100px;
 7         height: 100px;
 8         background: red;
 9     }
10     .green{
11         display: inline-block;
12         margin: 0;
13         padding: 0;
14         width: 100px;
15         height: 100px;
16         background
 
: green;
17     }
18 </style>

1 <div class="content">
2     <div class="red"></div>
3     <div class="green"></div>
4 </div>

我們來看看結果

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

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

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

1
 
 .content{
2     font-size: 0px;
3 }

 1 .content{
 2     font-size: 0px;
 3 }
 4 .red{
 5     display: inline-block;
 6     margin: 0;
 7     padding: 0;
 8     width: 100px;
 9     height: 100px;
10     background: red;
11     font-size: 16px;
12 }
13 .green{
14     display: inline-block;
15     margin: 0;
16     padding: 0;
17     width: 100px;
18     height: 100px;
19     background: green;
20     font-size: 16px;
21 }

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

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

兩個盒模型之間的空隙