最近做移動端頁面時，經常會用到inline-block元素來布局，但無可避免都會遇到一個問題，就是inline-block元素之間的間隙。這些間隙會導緻一些布局上的問題，需要把間隙去掉。對于inline-block元素及去掉間隙的方法，在這裡做一個簡單的總結。
inline-block是什麼？
inline-block 即内聯塊,在css的元素分類中可以分成三種：行内元素或者内聯元素、塊級元素、以及内聯塊元素。
内聯塊元素具有了内聯元素以及塊級元素的特性：（1）元素之間可以水準排列 （2）可以當做一個塊級元素來設定各種的屬性，例如：width、height、padding等。
例子1：定義一個内聯元素span為inline-block元素
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>這是一個div</div>
<div>這是一個div</div>
<div>這是一個div</div>
</body>
</html> 移除inline-block導緻div間隙的方法：
1、移除标簽間的空格
元素間的間隙出現的原因是元素标簽之間的空格，把空格去掉間隙自然就會消失。
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>這是一個div</div><div>這是一個div</div><div>這是一個div</div>
</body>
</html> 2、将所有div放到同一個div中
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
background: red;
display:inline-block;
}
</style>
</head>
<body>
<div>
<div>這是一個div</div>
<div>這是一個div</div>
<div>這是一個div</div>
</div>
</body>
</html> 3、通過設定父元素的font-size:0來解決這個問題
該方法适用于隻包含圖檔的div
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)