多种方法删除inline-block元素的空白间距
早期的CSS，块级元素和内联级元素完全对立，无法共存。只要是块级元素就必定纵向排列，无法像内联级元素那样横着排。但块级元素却具备内联级元素所没有的一些特征，比如宽度，高度等等。所以，既想具备块级特征，又想横向排列的话，早期的Web开发者会使用float属性来实现。
对于这样的需求，现在我们可以用inline-block取代float了。不过inline-block默认会在各块级元素之间生成宽度为4像素（Chrome浏览器下是8像素）的空隙。为此，小编收录了各种方法，它们各有优缺点，大家可以根据实际需要选择适合自己的方案。
首先我们把基础的HTML代码编写出来
为方便观察效果，我们给li设置了背景颜色，运行效果如下图所示。可见列表项li默认为块级元素。
然后，我们用inline-block调整排列方式，同时去掉列表项前面的圆点。
li{
/*其它样式代码省略*/
display:inline-block;
list-style-type:none;
}
运行效果如下图所示
跟纵向排列的块级元素不同，横向排列的各内联块级元素之间会有4像素（Chrome浏览器下是8像素）的空隙，而很多时候我们需要把这空隙去掉。
如果你有一定的Web开发经验，就会发现小编的这句话是错误的。该空隙并非由linline-block引起，哪怕我们用inline代替inline-block，甚至把li标签替换为默认就是内联的span标签，这空隙都仍然存在。
而真正产生空隙的罪魁祸首，却是一个很不起眼的——换行操作。所以，只要把li元素之间的换行全部去掉，那么各内联块级元素之间就没有空隙了。
<ul><li>HTML教程</li><li>CSS教程</li><li>CSS3教程</li><li>javaScript教程</li><li>BootStrap教程</li></ul>
运行效果如下图所示
问题虽然得到了解决，但这严重牺牲了可读性，如果列表项目再多一些，我们还是要为了绕开这问题而写在一行的话，那就真的太蛋疼了。
于是Web开发者们就想到了更多奇葩的解决办法，既能让编写的时候换行，又可以去掉最终效果里面的空隙。
第一种方法，在元素内容的内部换行。本来这样做是会把换行符转换为空格的，但由于这个空格在文本的开头，所以默认情况下会被浏览器忽略。
<ul>
<li>
HTML教程</li><li>
CSS教程</li><li>
CSS3教程</li><li>
Javascript教程</li><li>
BootStrap教程</li>
</ul>
第二种方法，在标签内换行，由于<>内部的字符都不显示在页面上，所以在这里换行不会影响最终效果。
<ul>
<li>HTML教程</li
><li>CSS教程</li
><li>CSS3教程</li
><li>JavaScript教程</li
><li>BootStrap教程</li>
</ul>
但这样的写法实在太别扭，我想强迫症患者肯定又受不了啦。
第三种方法，利用HTML注释对页面不造成任何影响的特性来实现换行。在注释内换行，同样不会显示到页面上。
<ul>
<li>HTML教程</li><!–
–><li>CSS教程</li><!–
–><li>CSS3教程</li><!–
–><li>JavaScript教程</li><!–
–><li>BootStrap教程</li>
</ul>
此法比第二种方法稍好一些，至少标签没有断开，但整个注释只有一个换行符，别人看到了会有什么样的感想呢？
第四种方法，干脆点，直接去掉封闭标签。
<ul>
<li>HTML教程
<li>CSS教程
<li>CSS3教程
<li>JavaScript教程
<li>BootStrap教程
</ul>
这样的话，换行也不会发生在元素之间了，元素内的换行转成空格后，因为它位于文本末端，所以也会被浏览器忽略。但是，利用语法错误来解决问题，同样也会降低可读性。
#p#分页标题#e#
抛开可读性的问题不说，在实际应用中，这些标签往往不是直接写到静态页面上，而是由后台动态生成。就拿CMS来说，后台动态生成的模式都是统一的，如果要单独为li元素多做一些额外的处理，那就必然对后台的架构造成极其严重的破坏，届时大家是不是都要来喷小编一脸呢？
所以，更好的方法还是不要用HTML标签来修正这一空隙，而是改用CSS进行控制。
比如我们可以用负数的外边距（margin）来抵消这个空隙。
li{
/*其它样式代码省略*/
margin-right:-4px;
*margin-right:0;
}
由于抵消的是空格，所以空格大小受到font-size属性的影响，如果ul元素内，li元素外包含文字，并且字号大小不一，那么这个负边距就很难统一了。此外，我们还要兼容Chrome默认的8像素，并且无法使用前缀进行区分，从而不得不借助于JavaScript。
也有的文章推荐使用-0.25em代替-4px，但是这只能解决Chrome的兼容，而未能解决字号的问题。
下一个方法，既然是空格，那么将ul的font-size设置为0就可以让空格不占位置了。
ul{
/*其它样式代码省略*/
font-size:0;
}
li{
/*其它样式代码省略*/
font-size:12px;
}
注意到li是ul内的元素，所以它会导致列表项里的文字也看不见。我们要在li元素选择器里把font-size恢复过来。
这个问题可以同时兼容Chrome和FireFox，但是Safari浏览器仍然有空隙。
所以此法也还不是很完美。
然后，小编再给大家介绍一种利用jQuery来解决的方法。如果你们的项目用到了Jquery框架，那就可以考虑此法。
<script language=”javascript”>
$('.removeTextNodes').contents().filter(function(){
returnthis.nodeType===3;
}).remove();
</script>
在DOM（DocumentTypeModel，文档对象模型）中，文档元素之间的空格也会被视为一个节点，比如<li>a</li></li>b</li>里面的空格。
这个空格属于文本节点，其nodeType等于3（文本节点），根据这一特性，我们可以在运行的时候把它们从页面中删掉。
虽然Jquery很火，而且此法也很完美，但是如果你的项目不基于Jquery框架，那么这个方法就不能直接使用了，你需要自己编写等效的JavaScript来解决。然后，兼容性问题又得自己手动处理。
好戏总在后头，最后介绍的这个方法，就能彻底解决这一问题了。font-size等于0的做法主要是不兼容Safari浏览器，但是有高手研究出了Safari的解决方案，并且分享到了互联网，所以小编也收录下来了，方法是利用负的letter-spacing抵消空格。
ul{
letter-spacing:-4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing:-4px;
font-size:0;
}
li{
font-size:16px;
letter-spacing:normal;
word-spacing:normal;
display:inline-block;
*display:inline;
}
小编觉得，如果用-0.25em代替-4px，那么需要根据字号调整的频率将有所下降。
换行一直是HTML语言的诟病，虽然我们可以通过pre标签实现显示换行和空格的强制显示，但是它的逆过程——强制隐藏换行和空格，却一直没有一个统一的标准，导致很多方法都不能兼容各大主流浏览器。这时候，小编就不禁要问了，浏览器之间的对抗所造成的后果，凭什么要Web开发者们来承受呢？
