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

最新推荐文章于 2022-06-16 00:00:29 发布

小黄爱吃炸鸡

最新推荐文章于 2022-06-16 00:00:29 发布

阅读量428

点赞数 1

文章标签： css html

原文链接：https://www.cnblogs.com/chenyingying0/p/12528032.html

版权

即使使用 *{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

关注