html元素上下间隔消除,前端小技巧01-去除inline-block元素间距

当元素display属性是inline-block时，元素之间在换行显示或空格分隔的情况下会有间距，举个栗子:

HTML结构如下：

样式如下：

效果图如下：

可以看到这里的 萝莉、 御姐、软妹之间有间隙，这类间距对我们的布局会产生影响，那我们怎么去除掉呢，这里推荐几种简单靠谱的做法。

01-移除元素间的空格

或者是这个样子：

再或者就是借助HTML的注释：

显然这几种方法如果在小的Demo中还可以一试，但是实际工作中我们的很多页面都需要这样去写，累死你丫的。

02-无需闭合标签

当然这种写法在HTML5的标准中是可以的，可是不要忘了做前端的还有几个老祖宗，就是IE6/IE7，为了讨好这俩祖宗，我们再稍微修改下：

这种标签写法处女座的看了表示无法接受，所以我们再看看其他的方法

03-使用margin负值

margin负值的大小与上下文的字体和文字大小相关，目前这里的字体大小是默认的16px，所以设置了-4px的间隙就可以了，那如果换种字体以及字体大小就又不行了，所以这个方法也不是很完美。继续看其他方法。

04-使用font-size:0

这里通过给父元素box设置了字体大小为0，然后再设置a标签自身的字体大小完美的解决了这个问题，不过在祖宗IE7下还有1px的间距，如果你的项目已经不再兼容IE9以下的浏览器，放心去使用，或者你的项目是移动端的，压根就不关IE这祖宗什么事了。

好了，如果你还有其他更好的方法，欢迎分享出来哦。