Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 12
    • Issues 12
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #183

Closed
Open
Created Sep 06, 2023 by JayChen@JayChenOwner

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即可

Edited Mar 25, 2024 by JayChen
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking