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