2019-9-18 seo達人
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
引起這種空白間隔的原因：
瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是我們上面的代碼
換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度。
解決方案：
方法一： 既然是因為< li>換行導致的，那就可以將< li>代碼全部寫在一排，如下
<div class="wrap">
<h3>li標簽空白測試</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>
1
2
3
4
5
6
7
再刷新頁面看就沒有空白了，就是這么神奇~
方法二： 我們為了代碼美觀以及方便修改，很多時候我們不可能將< li>全部寫在一排，那怎么辦？既然是空格占一個字符的寬度，那我們索性就將
內的字符尺寸直接設為0，將下面樣式放入樣式表，問題解決。
.wrap ul{font-size:0px;}
1
但隨著而來的就是
中的其他文字就不見了，因為其尺寸被設為0px了，我們只好將他們重新設定字符尺寸。
方法三： 本來以為方法二能夠完全解決問題，但經測試，將li父級標簽字符設置為0在Safari瀏覽器依然出現間隔空白；既然設置字符大小為0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。同樣隨來而來的問題是li內的字符間隔也被設置了，我們需要將li內的字符間隔設為默認。
.wrap ul{letter-spacing: -5px;}
1
之后記得設置li內字符間隔
.wrap ul li{letter-spacing: normal;}
1
2
詳細看這篇文章 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
藍藍設計( m.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。