溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css怎么讓塊無間隙，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
css讓塊無間隙的實現方法：首先創建一個HTML示例文件；然后定義一個內聯元素span為inline-block元素；最后移除標簽間的空格即可。
最近做移動端頁面時，經常會用到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怎么讓塊無間隙”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
