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間距解決方案