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

inline-block元素主要包括：<input> 、<img> 、<button> 、<texterea> 、<label>拥有内在尺寸，可设置宽高和内外边距，但是不会自动换行；

一、情景描述

.space a {
display: inline-block;
padding: .5em 1em;
background-color: red;
}

<div class="space"> <a href="#">苹果</a> <a href="#">橘子</a> <a href="#">甘蔗</a></div>

二、如何除去元素之间的空格

（1）使用magin负值

.space a {
display: inline-block;
padding: .5em 1em;
background-color: red;
margin-left:-5px;
 }

（2）使用font-size:0

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

（3）使用letter-spacing

.space {
   letter-spacing: -5px;
}
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: red;
    letter-spacing: 0px;
 }

（4）使用word-spacing

.space {
   word-spacing: -5px;
}
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: red;
word-spacing:0px;
  }

三、结果样式