去掉inline block間的間隙

2022-02-25 01:12:56 字數 563 閱讀 2234

當給多個相鄰元素設定display: inline-block時,元素之間缺省會產生間隙

width: 202px;

height: 202px;

margin: 30px auto;

border: 1px solid rgba(0, 0, 0, 3);

}.item

效果如圖,產生間隙。

一種思路是在html中手動刪掉div之間的空格或者div之間新增注釋

顯然上面兩種方法雖然有效,但是看起來很糟糕,而且編寫也很不便利。還有一種消除間隙的方法就是每個div設定為float,這裡不討論

當然還有一種一勞永逸的方法:給父元素設定font-size: 0

// 補充

font-size: 0;

}效果如下,間隙消除

去掉inline block元素間隙

目錄 1 標籤寫在一行,移除標籤間的空格 2 利用html注釋標籤 3 在父容器上使用font size 0 可以消除間隙 做頁面時,如果用到inline block元素來布局,就無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。我...

去掉inline block元素間隙的幾種方法

最近做頁面時,經常會用到inline block元素來布局,但無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。對於inline block元素及去掉間隙的方法,在這裡做乙個簡單的總結。1 標籤寫在一行,移除標籤間的空格 我是乙個s...

CSS 去掉inline block間隙的幾種方法

最近做移動端頁面時,經常會用到inline block元素來布局,但無可避免都會遇到乙個問題,就是inline block元素之間的間隙。這些間隙會導致一些布局上的問題,需要把間隙去掉。對於inline block元素及去掉間隙的方法,在這裡做乙個簡單的總結。inline block 即內聯塊,在c...