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;