当我们将元素设为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>之间存在空白换行符
解决方法一般是在不破坏dom结构的前提下改变写法以清除换行符
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