如何去除inline block之間的空隙?

2021-10-09 13:36:10 字數 836 閱讀 8968

元素被當成行內元素排版時,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,根據white-space的處理方式(預設是normal,合併多餘空白),原來html**中的回車換行被轉成乙個空白符,所以元素之間就出現了空隙。這些元素之間的間距會隨著字型的大小而變化,當行內元素font-size:16px時,間距為8px。

1、去除標籤之間的空格和回車

或者

2、使用負邊距

缺點:元素之間間距的大小與上下文字型大小相關;並且同一大小的字型,元素之間的間距在不同瀏覽器下是不一樣的,如:font-size:16px時,chrome下元素之間的間距為8px,而firefox下元素之間的間距為4px。所以不同瀏覽器下margin-right的負值是不一樣的,因此這個方法不通用。

3、給父級元素設定font-size:0,子元素根據實際情況使用font-size

缺點:inline-block元素必須設定字型,不然行內元素中的字型不不顯示

去除inline block元素間距

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

去除 inline block 元素間距

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

去除inline block元素間間距

根本原因 inline block元素之間之所以有空白間距是因為空格有字型大小原因。第一種 把 之間的換行空白都去掉。例如 第乙個inline block元素 第二個inline block元素 第二種 把inline block元素用乙個大的div包起來,然後設定其字型大小為0即可,inline ...