首页 > 文章资讯 > 站长教程 > 建站知识 > CSS：去除行内/行内块元素默认空隙的四种方式

CSS：去除行内/行内块元素默认空隙的四种方式

时间：2024年02月29日

来源：网络

编辑：佚名

几个连续的行内（inline）或行内块（inline-block）元素【span，i，img等标签，或标签被设置为display: inline/inline-block;】，有时会有默认的间隙。
效果如下:

原因：标签之间的空格、回车、换行造成的。
下面给出几种解决方式。
方式一：标签连写
<div class="box">
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
方式二：巧用注释标签
<div class="box">
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
方式三：父元素font-size:0，注意行内/行内块元素需同步设置font-size。
.box {
font-size: 0;
}
.box span {
padding: 0 20px;
background: #655;
font-size: 40px;
color: #fff;
}
方式四：浮动，注意清除浮动操作。
.box {
overflow: hidden;
}
.box span {
float: left;
padding: 0 20px;
background: #655;
font-size: 40px;
color: #fff;
}
方式一和方式二最为简单，方式三和方式四有使用注意事项。用哪种方式，看个人选择。

新闻资讯更多

猜你需要