Html Issue | 如何清除a、input等标签之间的默认留白间距

佚名 6年前 (2019-05-04) 随笔 1045人围观抢沙发百度已收录

即使我们使用了类似 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似 <a> 标签这类的inline-block元素之间也还存在着默认留白间距。
如下所示：

<div>
    <a href="#">#Python</a>
    <a href="#">#Django</a>
</div>

通过以下办法可以将默认留白间距去掉

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

方法一：font-size:0（推荐使用）

<div class="demo">
    <a href="#">#Python</a>
    <a href="#">#Django</a>
</div>
　　
.demo{
    font-size: 0;
}
.demo a{
    font-size: 14px; /*覆盖父级字体设置*/
}

方法二：a标签内容写在一行（谨慎使用）

<div class="demo">
    <a href="#">#Python</a><a href="#">#Django</a>
</div>

因为这种间距是由于元素留白引起的，所以，当我们把代码写在同一行的时候，间距也可消除。
但是考虑到代码的可读性，这种方法建议谨慎使用！

方法三：float浮动（兼容性）

<div class="demo">
    <a href="#">#Python</a>
    <a href="#">#Django</a>
</div>

.demo{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.demo a{
    float: left;
}

方法四：letter-spacing（兼容性良好可以使用）

<div class="demo">
    <a href="#">#Python</a>
    <a href="#">#Django</a>
</div>
　　
.demo{
    letter-spacing: -999px;
}
.demo a{
    letter-spacing: 0;
}