inline-block间距

大家好 我是程序员

1.背景介绍

我们在做移动端页面的时候，经常会用到inline-block元素来布局，但无可避免都会遇到一些问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及其去掉间隙的方法，在这里做一个简单的总结。

2.知识剖析

inline-block是什么？

inline-block是内联块元素，在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。

3.常见问题

间距如何产生的？

我们在书写标签的时候，为了代码的简洁直观会换行，但是浏览器在解析的时候会把这个换行解析成一个字符，就是所谓的间距，如果我们不换行，那当然也不会有间距了。

4.解决方案

（1）移除标签间的空格。

（2）把span标签的结束标签去掉，这样间隙就没有了。为了兼容IE6/IE7，最后一个标签需要闭合。（美团webapp页面也使用了这种方法）

（3）使用margin负值。

（4）在父元素上加上font-size：0；

（5）使用letter-spacing

6.扩展思考

7.参考文献

8.更多讨论

在移动端的页面中，个人倾向于设置font-size:0这种方法来清除掉。当然，每个人都有每个人的习惯，用着顺手就行。

ppt

视频