站長(zhǎng)資訊網(wǎng)css讓塊無間隙的實(shí)現(xiàn)方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)內(nèi)聯(lián)元素span為inline-block元素；最后移除標(biāo)簽間的空格即可。
本文操作環(huán)境：Windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦
最近做移動(dòng)端頁面時(shí)，經(jīng)常會(huì)用到inline-block元素來布局，但無可避免都會(huì)遇到一個(gè)問題，就是inline-block元素之間的間隙。這些間隙會(huì)導(dǎo)致一些布局上的問題，需要把間隙去掉。對(duì)于inline-block元素及去掉間隙的方法，在這里做一個(gè)簡(jiǎn)單的總結(jié)。
注：在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級(jí)元素。
inline-block是什么？
inline-block 即內(nèi)聯(lián)塊,在CSS的元素分類中可以分成三種：行內(nèi)元素或者內(nèi)聯(lián)元素、塊級(jí)元素、以及內(nèi)聯(lián)塊元素。
內(nèi)聯(lián)塊元素具有了內(nèi)聯(lián)元素以及塊級(jí)元素的特性：（1）元素之間可以水平排列 （2）可以當(dāng)做一個(gè)塊級(jí)元素來設(shè)置各種的屬性，例如：width、height、padding等。
例子1：定義一個(gè)內(nèi)聯(lián)元素span為inline-block元素
<!DOCTYPE html > <html> <head> <style type="text/css"> div{ background: red; display:inline-block; } </style> </head> <body> <div>這是一個(gè)div</div> <div>這是一個(gè)div</div> <div>這是一個(gè)div</div> </body> </html>
效果如下：
移除inline-block導(dǎo)致div間隙的方法：
1、移除標(biāo)簽間的空格
元素間的間隙出現(xiàn)的原因是元素標(biāo)簽之間的空格，把空格去掉間隙自然就會(huì)消失。
<!DOCTYPE html > <html> <head> <style type="text/css"> div{ background: red; display:inline-block; } </style> </head> <body> <div>這是一個(gè)div</div><div>這是一個(gè)div</div><div>這是一個(gè)div</div> </body> </html>
效果如下：
2、將所有div放到同一個(gè)div中
<!DOCTYPE html > <html> <head> <style type="text/css"> div{ background: red; display:inline-block; } </style> </head> <body> <div> <div>這是一個(gè)div</div> <div>這是一個(gè)div</div> <div>這是一個(gè)div</div> </div> </body> </html>
效果如下：
3、通過設(shè)置父元素的font-size:0來解決這個(gè)問題
該方法適用于只包含圖片的div
【推薦學(xué)習(xí)：css視頻教程】
