html 行内元素引起的空白间距问题
更新于 阅读 5 次
是由于空格、换行引起的
<div class="container">
<span class="item">131313131313131</span>
<span class="item">131313131313131</span>
<!-- <div class="subfix"></div> -->
</div>
两个span之间使用换行的话就回出现空格,那就换成如下的写法
<div class="container">
<span class="item">131313131313131</span><span class="item">131313131313131</span>
</div>
这样就没问题了,但是为了代码的可读性,肯定不能这么写,所以可以使用如下方法
.container {
font-size: 0;
}
.item {
font-size: 12px;
background-color: gray;
}
这只外层元素的font-size:0,内层元素重新设置字体即可消除。
其他方法:
.container {
letter-spacing: -3px;
}
.item {
font-size: 12px;
background-color: gray;
letter-spacing: 0;
}