解决inline-block的空白间距问题

一、问题描述

今天使用了inline-block代替了float的浮动效果，超方便的!

出现问题后百度了下原因，使用inline-block时换行显示和空格都会产生空白。。。于是尝试了各种办法去掉空白间距。

二、解决方案

1、修改html方法

由于标签之间存在空格，所以元素间有空白。如下：

（1）去掉标签间的空格；

空白间距果然消失了，但是这样代码的可读性较差，所以不建议使用。

（2）结束标签的“>”成了另一行的起始标签；

（3）将文字性内容作为下一行的开头；

（4）注释法；

虽然修改html的方法可以解决之一问题，但也只是用于静态的写法，若html不是自己写的，而是后台生成的标签，那可就有点小麻烦了。除了修改html的方法外，设置css的margin也同样可以解决这一问题。

2、css之margin负值

margin负值的大小与上下文的字体和文字大小相关。

这种解决方法并不完美，如果父元素的字号设置的不一样那么margin的值相对的也会改变，如果使用Chrome打开的话margin需要设置另外一个负值来解决。

3、设置父元素的字号为0

设置font-size:0也可以解决这一问题，在Chrome、Firefox等浏览器下都达到了效果，但在Safari下依然存在问题。

4、丢失结束标签

这一方法依然是在html上做修改

虽然写法怪怪的，但是是ok的！

5、使用letter-spacing

letter-spacing(字符间距)，基本浏览器都能搞定，不过Opera浏览器下有些问题：最小间距1px，再小的话就会还原了。

6、使用word-spacing

使用word-spacing(单词间距)在chorme上设置后还会存在间距，可以添加display:table或display:inline-table 间距问题就解决啦！

7、组合方法

使用以上6中css的组合方法也能解决这个问题，具体的事例就不粘出来了，大家可以自己试试哦~

三、结束语

解决inline-block的空白间距方法有很多种，除了上面所说的方法，还在别的博客上看过使用jquery的方法，但是没有尝试成功，感兴趣的朋友可以试试的！总的来说，各种方法都有利弊，选择合适的方法解决当下面临的问题吧~