Element cascader组件margin导致的问题
背景
当我尝试去修改cascador 多选时的组件lin-height高度时,我设置了32px。但是他始终不会低于34px
原因
经过源码的查阅,组件样式的多方位调整,任然无法解决问题。只能采取百试不爽的删除过滤法。
最终定位到,其有一个元素el-cascader__search-input
里面设置了,margin-top和margint-bottom都是2px,而本身height为24px。。。。。
解析
height:24px,border:2px。margin一共4px,不应该是30px吗,为什么是34px。
其实原因就是在部分版本上margin一直是存在bug的,他的父级会和子级产生多种效应。
虽然设置了margin-top和margin-bottom是2px,但是在父子双向作用下,会相当于margin-top和margin-bottom都是4px。
最终就是24+2+8 = 34px
解决方案
将margin换成padding即可