子元素设置overflow:hidden ,导致父元素被异常撑开?

作者站长头像
站长
· 阅读数 7

子元素设置overflow:hidden ,导致父元素被异常撑开?子元素设置overflow:hidden ,导致父元素被异常撑开?

如图,修改el-tabs样式,给.el-tabs__item 添加以下2个属性,会导致父元素高度被撑开width: 50px;overflow: hidden;

子元素只有40px,为什么父元素会有44px

回复
1个回答
avatar
test
2024-07-01

父级容器 .el-tabs__nav 下面有空白节点导致的。给父级节点 .el-tabs__nav 添加一个 font-size:0 或者 line-height:0 就可以解决问题了。


如果你要说为什么给 .el-tabs__item 元素添加了 overflow:hidden 就会出现这样的情况,和 BFC 相关的东西很难说清楚。可能会有其他大佬能解释明白吧,我的话不会考虑太多,单纯只是知道怎么解决。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容