多种方法删除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>

　　这样的话，换行也不会发生在元素之间了，元素内的换行转成空格后，因为它位于文本末端，所以也会被浏览器忽略。但是，利用语法错误来解决问题，同样也会降低可读性。

　　抛开可读性的问题不说，在实际应用中，这些标签往往不是直接写到静态页面上，而是由后台动态生成。就拿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开发者们来承受呢？