css讓區塊無間隙的實作方法：先建立一個HTML範例檔案；然後定義一個內嵌元素span為inline-block元素；最後移除標籤間的空格即可。
本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦
最近做行動版頁面時，常會用到inline- block元素來佈局，但無可避免都會遇到一個問題，就是inline-block元素之間的間隙。這些間隙會導致一些佈局上的問題，需要把間隙去掉。對於inline-block元素及去掉間隙的方法，在這裡做一個簡單的總結。
註：html中div、 p、hx、form、ul 、 li、dl、dd就是區塊級元素。
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
【推薦學習：css影片教學】
以上是css如何讓塊無間隙的詳細內容。更多資訊請關注PHP中文網其他相關文章！
