CSS教程：如何消除inline-block元素间间距问题

<input /> <input type="submit" />

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

这种表现是符合规范的应该有的表现（如果有人认为是bug就太()ay ()oy 了）。

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

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

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

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

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

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

七、使用word-spacing

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

.space {
    display: inline-table;
    word-spacing: -6px;
}

八、其他成品方法

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}