??當(dāng)元素是非塊級(jí)元素(span铐望,a等澜建,或者display: inline;(display: inline-block))時(shí)向挖,元素在一行內(nèi)排列蝌以,會(huì)有左右縫隙的問題炕舵。
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代碼放在一行內(nèi)
<div class="ct">
<span>tag1</span><span>tag2</span><span>tag2</span>
</div>
- 2.利用負(fù)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;再直接設(shè)置子元素的
.ct{
border: 1px solid #000;
font-size: 0;
}
span{
background-color: red;
font-size: 16px;
}