大家好 我是程序员
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这种方法来清除掉。当然，每个人都有每个人的习惯，用着顺手就行。
网友评论