塊元素之間有空白解決方案

2021-09-17 23:18:35 字數 1065 閱讀 1752

舉個簡單的栗子分析問題

1111

2222

結果:

我把粉色的寬度調小一點,19%。再試試!

發現這兩個塊之間的有個白色的小空隙了吧?為啥會有空白呢?

因為:發明html的人是老外,老外使用空格作為單詞之間的間隔的。inline-block 就像乙個個的單詞,剛剛的**不是換行了嗎?噯~html還有乙個空白字元壓縮的特點,你換行也好,tab也好,多個空格也好,都會壓縮成乙個空格(還記得當年初學前端時遇到空格不生效只能用 ;的時候嗎)。

現在知道問題的原因了,那麼怎麼解決呢?

1、不換行

1111

2222

缺點:這樣寫**,太不優雅了,解讀性太差。最重要的是運用模版的時候,比如我遇到問題的瀑布流,那都是只寫乙個元素,剩下的是通過迴圈遍歷,自動新增的元素,根本沒辦法控制換不換行。

2、給父元素設定font-size:0

缺點:子元素如果需要字型的話,會需要重新在子元素新增fon-size的設定。但如果像我一樣是不需要文字的話,就很完美了。

3、不用inline-block改為float

float是忽略空白符的,不過你的css布局可能要重新花一下心思,可能會涉及到清除浮動之類設定。

4、word-spacing屬性

5、white-space-collapse

《css3 text effects module**》中就有了「white-space-collapse」屬性,用來設定或者檢索元素內包含的空白字元。有如下取值:

所以解決辦法是:white-space-collapse:discard

但是,由於該屬性本身存在的諸多問題以及瀏覽器廠商沒有及時跟進和實現,所以根本用不了。希望這個屬性快快上架啦~~

元素底部為何有空白及其解決方案

要理解這個問題,首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline,這是乙個西文排版才有的概念。vertical align的有效取值為baseline,sub,super,top,te...

wordpress頂部空白解決方案

最近在搗鼓wordpress主題,發現頂部莫名其妙的多出一條空白框,導致頁面的效果變的優點差,於是嘗試去除。導致wordpress頁面出現空白框的原因大概有兩點 一,utf 8即檔案儲存型別 檔案儲存型別與使用版本之間如果不同,會導致上述問題。另存為對應的檔案型別。二,admin bar admin...

dedeEIMS新增文件空白解決方案

今天,使用萬網的空間,出現了乙個問題,上傳dedeeims後,除錯完畢,新增新聞,新增產品不能調整出現空白頁面,原先在香港空間使用的好好的,難道是萬網空間的php.ini配置有問題,俺用的是虛擬主機,人家不會為了俺這個dedeeims程式,要修改吧,只好在網上找方法,看看能不能通過修改dedeeim...