inline-block显示问题

在前端显示中，最常见的是关于inline-block的显示问题，有时候，inline-block元素中会莫名的有间距，有时候，有的inline-block会相互之间发生错位，这都是为什么呢？

间距

间距的产生往往是由于DIV之间的换行符1或者空格导致的，大概4px`左右。

    惆怅
    淡定
    热血

.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. 去除闭合标签

这种方法有一点点投机取巧，却是很好用的方法：

    惆怅
    淡定
    热血

效果图

可以看到，间距已经消失了。这种方法可以解决，却违反了一定的标准。
注意，为了向下兼容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。