css怎么讓塊無間隙

發(fā)布時間：2021-03-23 09:04:27 來源：億速云閱讀：152 作者：小新欄目：web開發(fā)

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

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

最近做移動端頁面時，經(jīng)常會用到inline-block元素來布局，但無可避免都會遇到一個問題，就是inline-block元素之間的間隙。這些間隙會導(dǎo)致一些布局上的問題，需要把間隙去掉。對于inline-block元素及去掉間隙的方法，在這里做一個簡單的總結(jié)。

注：在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級元素。

inline-block是什么？

inline-block 即內(nèi)聯(lián)塊,在CSS的元素分類中可以分成三種：行內(nèi)元素或者內(nèi)聯(lián)元素、塊級元素、以及內(nèi)聯(lián)塊元素。

內(nèi)聯(lián)塊元素具有了內(nèi)聯(lián)元素以及塊級元素的特性：（1）元素之間可以水平排列（2）可以當(dāng)做一個塊級元素來設(shè)置各種的屬性，例如：width、height、padding等。

例子1：定義一個內(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>這是一個div</div>
<div>這是一個div</div>
<div>這是一個div</div>
</body>
</html>

移除inline-block導(dǎo)致div間隙的方法：

1、移除標(biāo)簽間的空格

元素間的間隙出現(xiàn)的原因是元素標(biāo)簽之間的空格，把空格去掉間隙自然就會消失。

<!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、通過設(shè)置父元素的font-size:0來解決這個問題

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

看完了這篇文章，相信你對“css怎么讓塊無間隙”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

css怎么讓塊無間隙

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽