inline block元素間隙處理

2021-09-27 13:26:32 字數 605 閱讀 9343

要使多個塊級元素並行顯示,可使用float或者inline-block進行處理

使用inline-block會出現元素之間的間隙

<

div

class

="demo"

>

<

p>我是乙個span

p>

<

p>我是乙個span

p>

<

p>我是乙個span

p>

<

p>我是乙個span

p>

div>

.demo span

如圖:

*間隙是由換行或者回車導致的,所以將標籤**都寫同一行即可解決。不過這個方法不靠譜,因為space是由換行或回車所產生空白符所致,所以在其父元素設定font-size:0,如元素內有文字標籤需重寫font-size。

.demo

.demo span

如圖:

注釋:如需對低版本相容還得進一步處理

更多專業前端知識,請上

【猿2048】www.mk2048.com

去掉inline block元素間隙

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

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

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

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

當我們把元素屬性display設定成inline block時,元素之間就會產生間隙 效果如下 當我們把元素ul 下面的li放在同一行的時候你會驚奇的發現間隙消失了ab 所以我們可以認為元素的間隙是由於 回車 或者換行所導致的,但是如果我們為了消除間隙把元素都寫在一行的話未免太不美觀了,而且對於下乙...