首頁 > 文章 > web前端 > css如何讓塊無間隙

css如何讓塊無間隙

藏色散人原創: 2021-03-22 16:09:541720瀏覽

css讓區塊無間隙的實作方法：先建立一個HTML範例檔案；然後定義一個內嵌元素span為inline-block元素；最後移除標籤間的空格即可。

css如何讓塊無間隙

本文操作環境：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>

效果如下：

css如何讓塊無間隙

移除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>

效果如下：

css如何讓塊無間隙

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>

效果如下：

css如何讓塊無間隙

3、透過設定父元素的font-size:0來解決這個問題

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

【推薦學習：css影片教學】

以上是css如何讓塊無間隙的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼設定某一塊固定下一篇：css怎麼設定某一塊固定

看更多