3、先設(shè)定子元素字體,再設(shè)置父元素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;
}
運(yùn)行之后,a標(biāo)簽之間的間距消失了。
這里設(shè)置的子元素的font-size的值是任意設(shè)置的,只需要設(shè)置父元素的字號為0即可。
4、設(shè)置父元素letter-spacing或word-spacing為負(fù)值,要考慮字體,子元素有文字也要注意設(shè)置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;
}
運(yùn)行之后,a標(biāo)簽之間仍然沒有間距。這里要注意一點(diǎn)的是如果父元素的letter-spacing:設(shè)置的負(fù)值很大時,也會出現(xiàn)間隙的,比如letter-spacing: -5px,也會出現(xiàn)間隙。這里設(shè)置的letter-spacing是任意設(shè)置的。
5.float:left;設(shè)置浮動
html代碼不變,css代碼修改如下
.subject a{
display: inline-block;
background-color: red;
padding: 5px 8px;
text-decoration: none;
float: left;
}
ps:Span或Div設(shè)置“display:inline-block形式的中添加文字后,導(dǎo)致Span或Div排版掉落、錯位”的原因及解決方法是給span設(shè)置vertical-align:middle;