当元素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这祖宗什么事了。
好了,如果你还有其他更好的方法,欢迎分享出来哦。