去除inline block元素間間距

2021-09-20 08:11:02 字數 436 閱讀 7275

根本原因:inline-block元素之間之所以有空白間距是因為空格有字型大小原因。

第一種:

把**之間的換行空白都去掉。

例如:第乙個inline-block元素

第二個inline-block元素

第二種:

把inline-block元素用乙個大的div包起來,然後設定其字型大小為0即可,inline-block元素字型大小再單獨設定。

例如:

第乙個inline-block元素

第二個inline-block元素

這個方法,基本上可以解決大部分瀏覽器下inline-block元素之間的間距(ie7等瀏覽器有時候會有1畫素的間距)。不過有個瀏覽器,就是chrome, 其預設有最小字型大小限制,因為,考慮到相容性,我們還需要新增:

類似下面的**:

.space

去除inline block元素間距

現象 當使用inline block的時候,元素間會出現4px的間距 在chrome裡面 是8px 如下圖 原因 元素間留白間距出現的原因就是標籤段之間的空格 解決方法一 既然間距是因為標籤間的空格造成的,那麼消除空格就可以消除間距,但是這一類方法都不符合常規的 書寫習慣,所以 不推薦春天 夏天秋天...

去除 inline block 元素間距

布局時經常能發現inline元素和inline block元素水平呈現的元素間,會存在著一些意想不到的間距,舉例 inline block測試 測試由於換行和空格分割符的存在,行內元素間將被渲染為乙個小間距了。乙個 測試這樣看著仍舊不太舒服,尤其是專案裡縮排層級深的時候 content webkit...

去除inline block元素間間距

真正意義上的inline block水平呈現的元素間,換行顯示或空格分隔的情況下會有間距 那麼解決此問題有好多種方法,但是個人比較喜歡使用其中兩種 如下 由於現在html頁面都是使用html5 所以就使用 如下處理 ul class space li href 去除 li href 結束 li hr...