发表于: 2017-03-12 20:55:36

2 627


去掉inline-block间距有哪几种方法


一、背景介绍

inline-block 即内联块状元素,可以水平排版。但我们发现inline-block元素间在换行显示或空格分隔的情况下会出现空白间隙。 这种表现是符合规范的应该有的表现,而不是bug。但是有时候会对我们的布局造成影响,所以有时候我们会想办法去除它。

去除它有哪些方法呢?

二、知识剖析

课前引入

元素都有哪几种分类,都有什么特性?

哪种情况下,我们需要把元素设置为inline-block?


去掉间距的具体方法:

方法一:改变书写方式

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就消失了。

我们可以把inline-block元素写在同一行,这种方案是最直接的解决方案,但却也是最不靠谱的方案,存在很多不可控因素。 很多场景会让你崩溃:前后端协同;版本更迭;他人接手;自己忘了...,太多一不小心都可能让这个方案失效。

考虑到代码可读性,显然连成一行的写法是不可取的,我们可以进行改进,如下面几种写法:

 

对于某些元素可以将中间的结束标签去掉

但是IE6、IE7这一类的老浏览器就会不兼容这种写法。并且写法不规范,不建议使用。

demo:

https://ptteng.github.io/PPT/demo/css-48-how%20to%20remove%20inline-block%20space/demo1.html


方法二:使用margin负值

margin负值的大小与上下文的字体和文字大小相关,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。 由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

https://ptteng.github.io/PPT/demo/css-48-how%20to%20remove%20inline-block%20space/demo3.html


方法三:font-size


这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。


方法四:使用letter-spacing


方法五:使用word-spacing

 


三、常见问题

上面讲的几种方法,哪一种相对来说好一点呢?


四、解决方案

上面使用到的几种方法都存在一定的缺陷

使用无闭合标签来去掉空隙时,对于a标签可行,但对于span标签就不可行,见demo1。

使用margin负值时,margin负值的大小与上下文的字体和文字大小相关,以及最后一个元素多出的父margin值等问题, 这个方法不适合大规模使用。

使用letter-spacing和word-spacing时, 其在不同浏览器下效果不同,在Opera浏览器下最小间距1像素,然后,letter-spacing再小就还原了。

在不同情况下选用不同的方法,font-size基本上可以解决大部分浏览器下inline-block元素之间的间距。


五、编码实战


六、拓展思考

为什么font-size:0可以去掉间距呢?

通过前面的列子我们可以看到当没有换行或者回车时,空隙就不存在了,所以说间隙是由换行或者回车导致的。其实space是由换行或回车所产生空白符所致,解决办法:就是去掉空白符。

为什么font-size会对间隙有影响。space是由换行或回车所产生空白符所致,既然是字符当然无法摆脱font的控制。


七、参考文献

张鑫旭-鑫空间-鑫生活
inline-block元素间间隙产生及去除详解


更多讨论

letter-spacing和word-spacing有意思的一些事情,看demo:https://ptteng.github.io/PPT/demo/css-48-how%20to%20remove%20inline-block%20space/demo.html


PPT链接:https://ptteng.github.io/PPT/PPT/css-48-remove%20inline-block%20space.html#
视频链接:https://v.qq.com/x/page/j0383psj6vk.html



返回列表 返回列表
评论

    分享到