去除inline-block元素间间距的N种方法

1. 现象描述

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子

这里写图片描述

这里写图片描述

我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题

这里写图片描述

这里写图片描述

这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)

不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!

2. 方法之移除空格

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以

这里写图片描述

这里写图片描述

这里写图片描述

3. 让闭合标签吃胶囊

如下处理:

这里写图片描述

注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢

在HTML5中,我们直接

这里写图片描述

这里写图片描述

4. 使用font-size:0

类似下面的代码:

这里写图片描述

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:

这里写图片描述

5. 使用letter-spacing

这里写图片描述

6. 使用word-spacing

这里写图片描述

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页