在進行佈局時經常會出現，div與div之間雖然設置爲了margin: 0px ，但是依然有間距的問題，比如以下這種情況：
html部分代碼如下：
<body>
<div class="main">
<div class="content">
<div class="Sbox">
<div class="boximg"><img src="img/1.jpg"></div>
<div class="boxtext"><p>Batman</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/2.jpg"></div>
<div class="boxtext"><p>Eminem</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/3.jpg"></div>
<div class="boxtext"><p>Skrillex</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/4.jpg"></div>
<div class="boxtext"><p>Hearthstone</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/5.jpg"></div>
<div class="boxtext"><p>HigherBrother</p></div>
</div>
</div>
</div>
</body>css部分代碼：
.content {
background-color: lightblue;
width: 900px;
padding: 20px;
text-align: center;
}
.Sbox {
background-color: white;
display: inline-block;
width: 200px;
height: 140px;
padding: 10px 0px;
font-size: 14px;
margin: 0px;
}可以看到我雖然設置了各個盒子之間的間距爲0px，但是在瀏覽器中顯示出來依然有間距，打開控制檯審查元素也顯示沒有東西佔據了寬度啊，這是什麼問題呢？難道是瀏覽器問題？然而其實瀏覽器並沒有問題，有問題的只是我們的代碼！！！
在html中，我們每個div之間有縮進，這裏的縮進，其實就是空格或者回車，是一個字符！！！瀏覽器會認爲你在每個div直接加了一個空格，所以即使你的margin爲0，但是它中間依舊有間隔，所以就會出現上圖的情況。
那應該怎麼辦呢？難道是去掉縮進？我們不可以不要縮進啊，那樣代碼可讀性就太差了，那應該怎麼解決這個問題呢？其實很簡單，我們在 .content 中加上這樣一個樣式
.content {
background-color: lightblue;
width: 900px;
padding: 20px;
text-align: center;
font-size: 0px;
}打開瀏覽器，我們就可以發現
它就已經合併在一起了，因爲我們把字體大小設置爲了0px，也就不再佔據寬度了。
要是我們設置爲
.content {
background-color: lightblue;
width: 900px;
padding: 20px;
text-align: center;
font-size: 200px;
}
它就變爲了這樣，在某些特殊情況下，我們可以利用這一點來進行佈局。