如何用CSS消除按钮内换行单词间的垂直间隙？

嘿，这个问题我之前也踩过坑！其实导致UPGRADE和PLAN之间出现垂直间隙的元凶，大多是**行高（line-height）**或者元素默认的外边距/内边距在搞鬼，咱们一步步来搞定它：

1. 直接重置span的行高 #

浏览器默认的行高会给每行文本预留一定的间距，只要把span的line-height设为1（或者根据你的字体大小微调，比如0.95），就能快速压缩行与行之间的空隙：

/* 假设你的按钮类是.btn，span是内部元素 */
.btn span {
  white-space: normal;
  line-height: 1; /* 核心属性，按需调整数值 */
}

2. 清除默认的margin和padding #

有时候按钮本身或者span会继承一些UI框架的默认边距，直接清零试试，避免额外的间距干扰：

.btn span {
  white-space: normal;
  margin: 0;
  padding: 0;
  line-height: 1;
}
/* 如果按钮上下内边距太大，也可以调整按钮的padding */
.btn {
  padding: 6px 14px; /* 按需修改，减少上下方向的留白 */
}

3. 用Flex布局精准控制间隙 #

如果你的按钮用了Flex布局，直接把方向设为垂直列，再把gap设为0，就能彻底清除列之间的间隙，还能让文本自动居中：

.btn {
  display: inline-flex;
  flex-direction: column;
  gap: 0; /* 关键！清除垂直方向的间隙 */
  align-items: center; /* 让文本水平居中 */
  justify-content: center; /* 让文本垂直居中 */
}
.btn span {
  white-space: normal;
  /* 这里甚至可以不用额外设置line-height */
}

4. 检查字体本身的行高 #

有些字体自带较大的行高（比如一些无衬线字体），这时候可以搭配font-size调整line-height，或者换用行高更紧凑的字体，比如：

.btn span {
  white-space: normal;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 1;
}

一般按照上面的步骤试下来，就能消除两个单词之间的垂直间隙啦！

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