前端面试题（一）：如何解决使用inline-block引起的空白间隙的问题

冷不防 2022-05-24 04:29 138阅读 0赞

使用inline-block代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用 inline-block来实现元素的居中效果。但是inline-block会引起元素和元素之间几个像素的间隙（具体间隙大小取决于字体大小）。造成空白间隙的原因是在标签和标签之间使用了空格或换行符。 **因为空白字符也是字符，也会引用CSS样式**  
代码下入

*{ margin: 0; padding: 0; }
        ul{ list-style: none; }
        li{ display: inline-block; width: 100px; height: 100px; background: red; }

结果如图  
![这里写图片描述][70]

#### 解决方法1：既然空白间隙是由于换行或空格引起，那么消除换行符不就解决了 ####

但是，这个方法在chrome浏览器下没有效果，在IE6/7下残留1像素间隙。  
看HTML结构

![这里写图片描述][70 1]

#### 解决方法2：设置父元素的font-size为0，在子元素重新设置字体大小 ####

ie8，firefox，chrome 和 opera 浏览器下已经没有问题了，但是在 低版本safari 浏览器下还是有问题。

*{ margin: 0; padding: 0; }
        ul{ list-style: none; font-size: 0; }
        li{ display: inline-block; width: 100px; height: 100px; background: red; font-size: 16px; }

![这里写图片描述][70 2]

#### 解决办法3： 利用负margin-left（不推荐，具体负margin多少取决于字体的大小） ####

*{ margin: 0; padding: 0; }
        ul{ list-style: none; }
        li{ display: inline-block; width: 100px; height: 100px; background: red; margin-left: -5px; }

#### 解决办法4 letter-spacing（字符边距）：负值 or word-spacing（单词边距） 负值 ####

Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。然后，负值大小还是取决于字体。。。。

ul{ list-style: none; word-spacing: -5px; }
        li{ display: inline-block; width: 100px; height: 100px; background: red; word-spacing: 0; }

#### 解决办法5 ：去掉闭合标签 ####

emmm….这么做，不符合W3C标准哇….

![这里写图片描述][70 3]

##### 解决办法6 终极必杀：给父元素 设置font-size：0 ；letter-spacing：-3px ，子元素重新设置font-size #####

ul{ list-style: none; font-size: 0; letter-spacing: -3px; }

[70]: /images/20220524/f3903965f0fc4122bc9d05e04d36a7e9.png
[70 1]: /images/20220524/7e57ff4a970d425993ed279a71088748.png
[70 2]: /images/20220524/fe67940d3a1f48008d202b5c66a5b54b.png
[70 3]: /images/20220524/23da15bb13c04f96ae253e7fe1063f91.png