在前端顯示中氧吐，最常見的是關(guān)于
inline-block的顯示問題区丑，有時(shí)候，inline-block元素中會(huì)莫名的有間距，有時(shí)候壁袄，有的inline-block會(huì)相互之間發(fā)生錯(cuò)位，這都是為什么呢饮戳？
間距
間距的產(chǎn)生往往是由于DIV之間的換行符1或者空格導(dǎo)致的呻征，大概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;
}
效果：
可以看到叼丑，三個(gè)a標(biāo)簽都有間距关翎。
那么，知道原因后鸠信，移除間距的方法就有很多了：
1. 去除空格
這個(gè)方法其實(shí)在Angular等框架中使用還是使用比較便捷的纵寝，因?yàn)椋?code>Angular等框架中星立，基本都會(huì)通過循環(huán)的方式去生成爽茴，自然沒有空格葬凳，不過，在普通的書寫中室奏，如果直接去掉空格就會(huì)顯得很不美觀火焰，甚至?xí)o自己造成困惑。
2.設(shè)置margin
.space a {
display: inline-block;
margin-right: -4px;
}
這么做窍奋，也能夠起到去除空格的效果荐健，不過，卻也有瑕疵琳袄，因?yàn)椋?code>4px并不適用于所有的瀏覽器江场，有的瀏覽器可能是3px，有的可能是6px窖逗，所以該方法使用時(shí)需要謹(jǐn)慎址否。
3. 去除閉合標(biāo)簽
這種方法有一點(diǎn)點(diǎn)投機(jī)取巧，卻是很好用的方法：
<div class="space">
<a href="##">惆悵
<a href="##">淡定
<a href="##">熱血</a>
</div>
可以看到碎紊，間距已經(jīng)消失了佑附。這種方法可以解決，卻違反了一定的標(biāo)準(zhǔn)仗考。
注意音同，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個(gè)列表的標(biāo)簽的結(jié)束（閉合）標(biāo)簽不能丟秃嗜。
4.設(shè)置font-size
其實(shí)权均，我們可以思考下，為什么會(huì)有這個(gè)大小呢锅锨？其實(shí)叽赊，是和空格相關(guān)，那么必搞，其實(shí)空格也是一個(gè)字符必指，他也有自己的大小的，因此恕洲，我們可以在父元素中將font-size設(shè)為0塔橡，再在子元素中設(shè)置需要的字體：
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
然而做到這里還不完美，因?yàn)樵?code>chrome中對字體的大小是有限制的研侣，比如在電腦上的字體谱邪，最少總是12px，即使你設(shè)置10px或者更小庶诡，字體都不會(huì)變惦银，可以這么解決：
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
5.letter-spacing
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
這個(gè)和設(shè)置字體類似，不過是從字符的間距的角度出發(fā)，這種方法有著和margin方法類似的限制扯俱。
6.word-spacing
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
一個(gè)是字符間距(letter-spacing)一個(gè)是單詞間距(word-spacing)书蚪，大同小異,word-spacing的負(fù)值只要大到一定程度，其兼容性上的差異就可以被忽略迅栅。因?yàn)槭庑＃菜疲瑆ord-spacing即使負(fù)值很大读存，也不會(huì)發(fā)生重疊为流。
錯(cuò)位
錯(cuò)位，是最常見的了让簿，導(dǎo)致錯(cuò)位的原因其實(shí)主要就是一個(gè)叫基線的問題的導(dǎo)致的敬察。
一般解決方式是給inline-block設(shè)置 vertical-align: top。
