如何移除按钮内部文字上下默认间距且不修改原有类与元素类型

问题根因 #

你遇到的间距并非padding导致，核心是两个CSS属性叠加的效果：

• .button-text-big-class 给按钮设置了固定高度 height: 48px
• .btn 配置的行高 line-height: 1.5 对应16px字号仅生成24px的实际内容高度，固定高度和内容高度的差值会自动平均分配为文字上下的留白，所以你调整padding不会生效。

解决方案 #

不需要修改元素类型、也不需要删除已引入的任何CSS类，只需新增优先级足够的CSS规则覆盖原有属性即可：

方案1：让按钮高度由内容自动撑开（完全移除上下多余留白） #

如果不需要保留按钮48px的固定高度，直接让高度贴合内容即可：

/* 双类选择器优先级高于单个类选择器，可正常覆盖原有属性 */
.btn.button-text-big-class {
  height: auto;
  /* 如果需要进一步压缩文字自带的行高间距，可额外添加下行，数值可按需调整 */
  line-height: 1;
}

方案2：保留48px按钮高度，自定义文字垂直位置 #

如果需要保留按钮48px的总高度，可通过弹性布局调整文字位置：

.btn.button-text-big-class {
  display: inline-flex;
  /* 可按需调整对齐规则：flex-start贴顶部、center居中、flex-end贴底部 */
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者yalpsid eman