最近在css battle**鞏固css時,遇到了一些問題,淺記錄一下。
html的body部分如下:
現在需要將盒子排列成如下布局,需要將盒子轉為inline-block
型別,再設定margin
來控制布局。
但我們發現,display:inline-block
之後,盒子間存在間距,導致設定margin時比較麻煩,如下圖:
(即使在初始時將所有的margin
和padding
都清零了,這些間距也依然存在)
出現這種問題的原因是: 兩個div
之間有空白字元
方案一將html部分改為div
之間緊密相連
方案二(推薦)
把父元素的font-size
設定為0。
注意在這種情況下,如果子元素中有文字,那麼需要額外給子元素設定字型大小,因為字型相關的屬性可以從父元素繼承。
去除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 ...