inline-block是一個塊狀行盒，表現(xiàn)為一個行內(nèi)元素，它既擁有了塊狀元素可以設(shè)置width和height的特性，又保留了行內(nèi)元素不換行的特點。
應(yīng)用了display:line-block屬性的元素會生成一個塊狀盒，該塊狀盒隨著周圍內(nèi)容流動，如同它是一個單獨的行內(nèi)盒子，其表現(xiàn)更像是一個被替換的元素。
真正意義上inline-block水平呈現(xiàn)的元素間，換行顯示或空格分隔的情況下會有間距，上代碼：
<input />
<input type="submit" />
使用CSS更改非inline-block水平元素為inline-block水平也會有該問題：
<style>
a {
background: pink;
display: inline-block;
padding: .5em 1em;
}
</style>
<div>
<a href="">鏈接1</a>
<a href="">鏈接2</a>
<a href="">鏈接3</a>
<a href="">鏈接4</a>
</div>
以上情況是符合規(guī)范的應(yīng)有表現(xiàn)，但這類間距有時會對我們的布局或兼容性產(chǎn)生影響，所以要想辦法去掉它，以下示例幾種方法～
1. 移除空格
元素間留白間距的出現(xiàn)原因即標(biāo)簽段間的空格，去掉空格間距自然沒有了。
以下是幾種寫法：
<div>
<a href="">
鏈接1</a><a href="">
鏈接2</a><a href="">
鏈接3</a><a href="">
鏈接4</a>
</div>
<div>
<a href="">鏈接1</a
><a href="">鏈接2</a
><a href="">鏈接3</a
><a href="">鏈接4</a>
</div>
<div>
<a href="">鏈接1</a><!--
--><a href="">鏈接2</a><!--
--><a href="">鏈接3</a><!--
--><a href="">鏈接4</a>
</div>
三種寫法都能達(dá)到去除縫隙的效果：
2. 使用margin負(fù)值
margin負(fù)值的大小與上下文字體和文字大小有關(guān)，由于外部環(huán)境的不確定性及最后一個元素多出的父margin值等問題，此方法不適合大規(guī)模使用。
<style>
a {
background: pink;
display: inline-block;
padding: .5em 1em;
margin: -3px;
}
</style>
<body>
<div>
<a href="">鏈接1</a>
<a href="">鏈接2</a>
<a href="">鏈接3</a>
<a href="">鏈接4</a>
</div>
</body>
3. 刪掉閉合標(biāo)簽
HTML5中可以很任性：雖然這樣很怪但確實有效。
<div>
<a href="">鏈接1
<a href="">鏈接2
<a href="">鏈接3
<a href="">鏈接4
</div>
4. 使用font-size:0
<style>
div{
font-size: 0;
}
a{
font-size: 16px;
background: pink;
}
</style>
<div>
<a href="">鏈接1</a>
<a href="">鏈接2</a>
<a href="">鏈接3</a>
<a href="">鏈接4</a>
</div>
5. 使用letter-spacing
<style>
div{
letter-spacing: -6px;
}
a{
letter-spacing: 0;
background: pink;
}
</style>
<div>
<a href="">鏈接1</a>
<a href="">鏈接2</a>
<a href="">鏈接3</a>
<a href="">鏈接4</a>
</div>
6. 使用word-spacing
<style>
div{
word-spacing: -6px;
}
a{
word-spacing: 0;
background: pink;
}
</style>
<div>
<a href="">鏈接1</a>
<a href="">鏈接2</a>
<a href="">鏈接3</a>
<a href="">鏈接4</a>
</div>
參考資料：
去除inline-block元素間間距的N種方法
