【郑州-第127期】去掉INLINE-BLOCK间隙的几种方法

大家好，我是IT修真院郑州分院第一期的学员胡嘉杰，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，修真院官网CSS任务6，深度思考中的知识点——去掉INLINE-BLOCK间隙的几种方法。

一、背景介绍

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的控制。

七、参考文献

张鑫旭-鑫空间-鑫生活

inline-block元素间间隙产生及去除详解

八、更多讨论

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

Fighting the Space Between Inline Block Elementsx

去掉INLINE-BLOCK间隙的几种方法_腾讯视频

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：64290793，或者你可以直接点击此链接：http://www.jnshu.com/login/1/64290793