inline-block間距解決方案
阿新 • • 發佈:2017-10-03
設置 -a 動漫 分開 空白 新的 char left 還原
當我們將元素設為inline-block時,總是會莫名其妙出現一些間距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul { padding-left: 0; } ul li { width: 20px; height: 20px; background: red; display: inline-block; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
效果如下:
原因在於空白符的存在!</li>與下一行的<li>之間存在空白換行符
解決方法一般是在不破壞動漫結構的前提下改變寫法以清除換行符
1.結束標簽與開始標簽拼接
<ul> <li> </li><li> </li><li> </li><li> </li> </ul>
2.拆分開始標簽
<ul> <li> </li><li ></li><li ></li><li ></li> </ul>
3.拆分結束標簽
<ul> <li></li ><li></li ><li></li ><li></li> </ul>
4.將換行符註釋掉
<ul> <li></li><!-- --><li></li><!-- --><li></li><!-- --><li></li> </ul>
5.使用margin負值
即將margin-left設為負值,讓其向左偏移,但偏移距離與瀏覽器、上下文字體及字體大小有關,一說為-0.25em,親測並不適用,故此方法適用性不佳
6.清除閉合標簽(看起來怪怪的。。)
<ul> <li> <li> <li> <li> </ul>
註意: 父元素的閉合標簽不可省去,否則在低版本瀏覽器(主要指IE)上會有問題
7.父元素font-size設為0
原理很簡單,父元素font-size設為0後空白字符字體大小也為0,自然看不出來,但是在有些瀏覽器上,最小字體有限制,主要指的是chrome,
這時,可加上-webkit-text-size-adjust: none (-webkit-text-size-adjust 是否根據設備大小調整字體,僅僅在移動設備上有效),但最新的chrome已解決此問題
8.letter-spacing設為負值
將leter-spacing設為負值可減少設置消除間距,不同瀏覽器數值不一樣,一般不會發生疊加,但opera上會有過小還原的現象。
9.word-spacing設為負值
類似於letter-spacing的效果,但過小時會發生疊加,私認為此方法也不算可取。
因此現階段最好的方法為: 改變dom結構、清除閉合標簽及font-size設為0
inline-block間距解決方案