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

阳光穿透心脏的1/2处 2022-06-09 13:47 148阅读 0赞

常见的inline-block元素：img input

**1、现象描述**

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距  
如：

效果图如下：  
![这里写图片描述][SouthEast]

当我们使用CSS更改非inline-block水平元素为inline-block水平呈现时，也会有该问题：

.space a { display: inline-block; background-color: #cad5eb; font-size:12px; }

效果图如下：  
![这里写图片描述][SouthEast 1]  
当这类间距对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？

**2、解决方法**  
（1）父元素设置font-size：0

.space{ font-size:0; }
     .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; font-size: 12px; }

效果图如下：  
![这里写图片描述][SouthEast 2]

（2）设置margin-left  
margin负值的大小与上下文的字体和文字大小相关

.space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; font-size: 12px; margin-left:-5px; }

效果如上

（3）设置letter-space

.space{ letter-spacing: -6px; }
            .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; font-size: 12px; letter-spacing:0; }

效果如上

（4）设置word-space

.space{ letter-spacing: -6px; }
     .space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb; font-size: 12px; letter-spacing:0; }

效果如上

[SouthEast]: /images/20220609/f68d730b345045d5a04dc4741091eadb.png
[SouthEast 1]: /images/20220609/9ae887ba1ac940df9430ff7f3339b3f4.png
[SouthEast 2]: /images/20220609/9ed4c7ea6b1846c18d0adcd553e7a963.png