发表于: 2017-02-27 23:53:51

1 1460


去掉inline-block间隙的几种方法

小课堂【武汉第86期】

分享人:张增锋

一、背景介绍

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

二、知识剖析

方法一:改变书写方式

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。我们可以把inline-block元素写在同一行,这种方案是最直接的解决方案,但却也是最不靠谱的方案,存在很多不可控因素。

很多场景会让你崩溃:前后端协同;版本更迭;他人接手;自己忘了...,太多一不小心都可能让这个方案失效。

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

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

方法二:font-size

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

方法三:使用margin负值

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

方法四:使用word-spacing和letter-spacing

一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似负值很大,也不会发生重叠。

三、常见问题

上面使用到的几种方法都存在一定的缺陷,使用无闭合标签来去掉空隙时,对于a标签可行,但对于span标签就不可行。使用margin负值时,margin负值的大小与上下文的字体和文字大小相关,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。使用letter-spacing和word-spacing时,其在不同浏览器下效果不同,在Opera浏览器下最小间距1像素,然后,letter-spacing再小就还原了。

四、解决方案

在不同情况下选用不同的方法,font-size基本上可以解决大部分浏览器下inline-block元素之间的间距或者可以同时写多种方法,这样就可以兼容不同浏览器。

五、编码实战

六、拓展思考

inline-block空隙产生的原因,过前面的列子我们可以看到当没有换行或者回车时,空隙就不存在了,所以说间隙是由换行或者回车导致的,应该无大问题。其实space是由换行或回车所产生空白符所致,解决办法:就是去掉空白符。为什么font-size会对间隙有影响。space是由换行或回车所产生空白符所致,既然是字符当然无法摆脱font的控制。

七、参考文献

张鑫旭-鑫空间-鑫生活  http://www.zhangxinxu.com/wordpress/2012/04/

inline-block元素间间隙产生及去除详解  http://demo.doyoe.com/css/inline-block-space/

八、更多讨论

其他去除inline-block元素间间隙的方法:

Fighting the Space Between Inline Block Elementsx. 

https://css-tricks.com/fighting-the-space-between-inline-block-elements/



返回列表 返回列表
评论

    分享到