css怎么讓塊無(wú)間隙

小編給大家分享一下css怎么讓塊無(wú)間隙，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

自流井網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,自流井網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為自流井1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的自流井做網(wǎng)站的公司定做！

css讓塊無(wú)間隙的實(shí)現(xiàn)方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)內(nèi)聯(lián)元素span為inline-block元素；最后移除標(biāo)簽間的空格即可。

最近做移動(dòng)端頁(yè)面時(shí)，經(jīng)常會(huì)用到inline-block元素來(lái)布局，但無(wú)可避免都會(huì)遇到一個(gè)問(wèn)題，就是inline-block元素之間的間隙。這些間隙會(huì)導(dǎo)致一些布局上的問(wèn)題，需要把間隙去掉。對(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í)元素來(lái)設(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、通過(guò)設(shè)置父元素的font-size:0來(lái)解決這個(gè)問(wèn)題

該方法適用于只包含圖片的div

看完了這篇文章，相信你對(duì)“css怎么讓塊無(wú)間隙”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：css怎么讓塊無(wú)間隙
標(biāo)題鏈接：http://bm7419.com/article12/isgjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、微信小程序、、小程序開發(fā)、云服務(wù)器、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容