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

常见的inline-block元素：img input

1、现象描述

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

<input /> <input type="submit" />

<input />
<input type="submit" />

效果图如下：

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

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

<div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a></div>

效果图如下：

当这类间距对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？

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

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

效果图如下：

（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;
   }

效果如上