css解决display:inline-block;产生的缝隙（间隙）

display：inline-block的缝隙

    

      
1111
      
2222
      
3333
      
4444
      
5555
    
  

这每个li之间的间隙是符合W3C标准规范的表现，是元素书写的时候换行产生的空白符造成的问题。但不满足业务需求。完善这种的缝隙有如下几种方法：

一、书写的时候，省略空格

 
    

      
1111
2222
3333
4444
5555
    
  

二、第一种方法，元素少的情况下还可以满足，但不符合实际业务开发。第二种方法就是设置父元素的font-size:0px，然后再设置各个子元素的font-size数值。

ul{
font-size: 0;
}
ul li{
  display: inline-block;
  border: 1px solid #000000;
  font-size: 14px;
}
 
    

        
1111
         
2222
         
3333
         
4444
         
5555
    

方法三：负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

以上三种方法，前两种是比较好的解决办法，第三种方法不推荐使用。网上还有其他的解决办法，但我认为还是前两种比较好。

原文 https://www.cnblogs.com/tnnyang/p/6136973.html