如何去除使用inline-block之后的间距（二）？

3、先设定子元素字体，再设置父元素font-size:0px;////chrome中：-webkit-text-size-adjust:none; 

html代码不变，css代码修改如下：

.subject{

font-size: 0;

}

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

font-size: 12px;

}

运行之后，a标签之间的间距消失了。



这里设置的子元素的font-size的值是任意设置的，只需要设置父元素的字号为0即可。

4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。

html代码不变，css代码修改如下：

.subject{

letter-spacing: -10px;

}

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

letter-spacing: 1px;

}

运行之后，a标签之间仍然没有间距。这里要注意一点的是如果父元素的letter-spacing:设置的负值很大时，也会出现间隙的，比如letter-spacing:
-5px，也会出现间隙。这里设置的letter-spacing是任意设置的。

5.float:left; 设置浮动

html代码不变，css代码修改如下

.subject a{

display: inline-block;

background-color: red;

padding: 5px 8px;

text-decoration: none;

    float: left;

}

 

ps：Span或Div设置“display:inline-block形式的中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法是给span设置vertical-align:middle;