display:inline-block的间隙问题和解决办法

Posted 2021-01-23 wzp-monkey

空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是它是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，就可以解决inline-block元素间换行符间隙的问题。

1.  {font-size:0;}
但是，这个方法在chrome浏览器下没有效果，在IE6/7下残留1像素间隙。

2. letter-spacing 属性可以控制文字间的水平距离的，支持负值，可以让文字水平方向上重叠。
但是，基本上所有的浏览器对于不同字体下的空格符的水平占据的解析都是一致，唯一有瑕疵的是在Opera浏览器下，两个inline-block元素间空白间隙使用letter-spacing去除的极限是1像素，当看上去要正好为0的时候，letter-spacing似乎失效，空白间距恢复成letter-spacing:0时的效果。

将两个解决办法综合，就是一个完美的解决办法： 
给上述代码的父级块.box元素设置如下：

.box {
    font-size: 0;
    letter-spacing: -3px;
}

总结：应用display:inline-block属性实现列表布局的几个关键字就是：block水平的标签，font-size:0和letter-spacing负值。（不过，最新版本的chrome对font-size:0;去除间隙是有效的，但本着兼容大多浏览器，最好还是选择两者都写的方式吧。）

 

3.设置margin-left或margin-right为负值（一般为-3px） 不过各个浏览器不兼容。

4.不使用inline-block，可以使用flex。

 

补充：

有时候inline-block还会遇到顶部不在一个基准线的情况（垂直方向上产生的间隙）

解决办法：在每一个子元素上加一个属性：vertical-align:top;(或者值是bottom，要看具体实现的效果了，想让顶部对齐就top，想让底部对齐就bottom)