inline-block 空白間距問題

一. 問題

元素是inline-block屬性時，會有空白間隙

二. 解決方案

1. html方式

1）將元素之間的空隙去除

<div class="space">
    <a href="##">A</a
    ><a href="##">B</a
    ><a href="##">C</a>
</div>

2）省略閉合標籤

<div class="space">
    <a href="##">A
    <a href="##">B
    <a href="##">C</a>
</div>

2. css方式

1. 使用margin負值（不一樣瀏覽器margin-right值可能不同）

.space a {
    display: inline-block;
    margin-right: -3px;
}

2. font-size：0(IE7會有1px的間隙)

.space {
    font-size: 0;

}
.space a {
    font-size: 12px;
}

3. letter-spacing負值（Opera瀏覽器最小間距1px，letter-spacing再小就還原了）

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

4. word-spacing負值

.space {
    display：inline-table；(爲了兼容Chrome)

    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

三. inline-block和baseline

http://www.javashuo.com/article/p-vqvxbsim-g.html