在前端显示中，最常见的是关于
inline-block的显示问题，有时候，inline-block元素中会莫名的有间距，有时候，有的inline-block会相互之间发生错位，这都是为什么呢？
间距
间距的产生往往是由于DIV之间的换行符1或者空格导致的，大概4px`左右。
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
效果：
可以看到，三个a标签都有间距。
那么，知道原因后，移除间距的方法就有很多了：
1. 去除空格
这个方法其实在Angular等框架中使用还是使用比较便捷的，因为，在Angular等框架中，基本都会通过循环的方式去生成，自然没有空格，不过，在普通的书写中，如果直接去掉空格就会显得很不美观，甚至会给自己造成困惑。
2.设置margin
.space a {
display: inline-block;
margin-right: -4px;
}
这么做，也能够起到去除空格的效果，不过，却也有瑕疵，因为，4px并不适用于所有的浏览器，有的浏览器可能是3px，有的可能是6px，所以该方法使用时需要谨慎。
3. 去除闭合标签
这种方法有一点点投机取巧，却是很好用的方法：
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>
可以看到，间距已经消失了。这种方法可以解决，却违反了一定的标准。
注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。
4.设置font-size
其实，我们可以思考下，为什么会有这个大小呢？其实，是和空格相关，那么，其实空格也是一个字符，他也有自己的大小的，因此，我们可以在父元素中将font-size设为0，再在子元素中设置需要的字体：
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
然而做到这里还不完美，因为在chrome中对字体的大小是有限制的，比如在电脑上的字体，最少总是12px，即使你设置10px或者更小，字体都不会变，可以这么解决：
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
5.letter-spacing
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
这个和设置字体类似，不过是从字符的间距的角度出发，这种方法有着和margin方法类似的限制。
6.word-spacing
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异,word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。
错位
错位，是最常见的了，导致错位的原因其实主要就是一个叫基线的问题的导致的。
一般解决方式是给inline-block设置 vertical-align: top。
