inline block元素間隙產生及去除方法

2022-08-26 15:51:20 字數 583 閱讀 1272

當我們把元素屬性display設定成inline-block時,元素之間就會產生間隙

效果如下:

當我們把元素ul 下面的li放在同一行的時候你會驚奇的發現間隙消失了ab

所以我們可以認為元素的間隙是由於「回車」或者換行所導致的,但是如果我們為了消除間隙把元素都寫在一行的話未免太不美觀了,而且對於下乙個接手你工作的人也是乙個頭疼的事情。所以我們採用另一種方法,font-size:0,為什麼能消除呢?我們知道間隙是因為空格或者換行所產生的,而產生了一些空白字元,既然是字元當然拜託不了font的控制啦。

ul 對產生間隙元素的父元素

當然方法肯定不止這幾種,例如負margin,letter-spacing,word-spacing等等也是可以的

去掉inline block元素間隙

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

inline block元素間隙處理

要使多個塊級元素並行顯示,可使用float或者inline block進行處理 使用inline block會出現元素之間的間隙 div class demo p 我是乙個span p p 我是乙個span p p 我是乙個span p p 我是乙個span p div demo span 如圖 間...

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

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