清除a标签或者span标签之间的默认留白间距后,子元素不显示文字问题。

使用代码重置浏览器默认样式后,inline-block元素间仍存在留白和间距。文中介绍了四种消除间距的方法,包括父元素设font-size:0、元素写在一行、设置float浮动、修改letter-spacing,还提及各方法的优缺点及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

即使使用 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式

类似标签这种inline-block元素,它们之间还是存在着留白和间距。在这里插入图片描述
有四种方法可以消除间距:

1、父元素设置font-size:0,子元素设置具体的font-size。

这也是最最推荐的方法

.demo1{
    font-size: 0;
}
.demo1 a{
    font-size: 14px;/*这里一定要设置,不然文本内容将不显示*/
}

2、把这些a标签元素或者span标签元素写在一行

但是考虑到代码的可读性,这种方法建议谨慎使用!
在这里插入图片描述

3、设置float浮动

这种方法会对原来的布局造成影响,所以,如果要采用这种方法,要考虑到对布局的影响。
在这里插入图片描述

4、修改父元素和子元素的letter-spacing

.demo3{
    letter-spacing: -999px;
}
.demo3 a{
    letter-spacing: 0;
}

该方法兼容性良好可以使用。

最后结果↓
结果
参考:https://www.cnblogs.com/chenyingying0/p/12528032.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值