el-tag之间为什么会有间距?

在项目里使用多个el-tag,两两之间会有一个小间距。但是el-tag源码,是没有用 .el-tag + .el-tag兄弟选择器来作用margin的。也就是,他本身,是没有间距作用的。所以怀疑,是不是我项目里的其他css代码作用到了el-tag。但是全局搜索了.el-tag。也并没有找到这个css样式。
在这里插入图片描述

后来查了半天,发现是lnline-block的特性。

查看element-ui文档的官网,发现也是有间距的。即使把他作用的margin-left:10px去掉后,也还是有个小间距。
原因就是因为,span标签之间有空格导致的。右键div选择edit as html 之后,把中间的空格去掉,你就会发现,间距没了。

在这里插入图片描述

在这里插入图片描述
参考该文档的总结
https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

在这里插入图片描述
因为我们平时开发vue项目,标签与标签之间都是换行的。el-tag的display又是inline-block。所以导致了这个间距的出现。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值