当元素是非块级元素（span，a等，或者display: inline;(display: inline-block)）时，元素在一行内排列，会有左右缝隙的问题。
html代码
<div class="ct">
<span>tag1</span>
<span>tag2</span>
<span>tag2</span>
</div>
CSS 代码
.ct{
border: 1px solid #000;
}
span{
background-color: red;
}
解决方法是：
- 1.把html代码放在一行内
<div class="ct">
<span>tag1</span><span>tag2</span><span>tag2</span>
</div>
- 2.利用负margin: -4px;（一般来说是-4px）
.ct{
border: 1px solid #000;
padding-left: 4px;
}
span{
background-color: red;
margin-left: -4px;
}
- 3.利用float 和 BFC
.ct{
border: 1px solid #000;
overflow: hidden;/*形成BFC*/
}
span{
background-color: red;
float: left;
}
- 4.父元素的 font-size: 0;再直接设置子元素的
.ct{
border: 1px solid #000;
font-size: 0;
}
span{
background-color: red;
font-size: 16px;
}
