css中font-size为0的妙用(消除内联元素间的间隔,像:inline-block、inline)

当内联元素在一行挨着排列时,两个之间会有间距,解决办法就是在它们的父元素添加一个 font-size:0;就可以让它们这之间没有间距。
在这里插入图片描述
解决方法还有一些,例如:margin负值 , letter-spacing, word-spacing,浮动等但是最佳的解决方案还是font-size:0

实践运用
在这里插入图片描述
方式一,适用于parser组件(推荐)
rich-text 给样式font-size:0;即可解决-实践成功

<parser :html="detail" style="font-size: 0;"/>
<!-- <rich-text :nodes="detail" style="font-size: 0;"></rich-text> -->

方式二(不推荐,本人在使用时不生效)

let IsReg = new RegExp('<img', 'gi'); //表明规则  表格则是< table 
//放入本地data中
this.DataMsg=res.data  //获取到数据
//将图片的宽度改为合适的宽度   如果display:block 则可以独占一行显示
this.DataMsg= _this.DataMsg.replace(IsReg, `<img style="max-width: 100%;display:block;"`);
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐