去除inline block元素間距

2021-07-13 18:50:52 字數 812 閱讀 1511

現象 :

當使用inline-block的時候,元素間會出現4px的間距(在chrome裡面 是8px),如下圖

原因 : 

元素間留白間距出現的原因就是標籤段之間的空格

解決方法一:

既然間距是因為標籤間的空格造成的,那麼消除空格就可以消除間距,但是這一類方法都不符合常規的**書寫習慣,所以

不推薦

春天

夏天秋天

冬天

春天

夏天

秋天

冬天

春天

夏天秋天

冬天

解決方法二:

這一類方法是通過定位將空格消除,給margin負值即可,一般瀏覽器為-4px,chrome是-8px

a
解決方法三:

這一類方法是通過設定font-size來實現

div

a

解決方法四:

使用letter-spacing

或word-spacing

普通瀏覽器-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 ...

去除inline block元素間間距

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