如何调整CSS元素行高及span.status-stop内边距匹配周边文本高度

针对你遇到的自定义字体底部内边距过大、与周边文本高度不匹配的问题，可以通过以下几种CSS方案逐步解决：

1. 重置元素默认内外边距 #

首先确保span.status-stop没有继承或自带的多余内边距，先重置基础样式：

span.status-stop {
  padding: 0; /* 移除上下内边距 */
  margin: 0; /* 重置外边距避免干扰 */
}

2. 对齐基线并统一行高 #

自定义字体的基线位置可能与Pretendard不一致，通过vertical-align强制对齐到文本基线，并保持和周边文本一致的行高：

span.status-stop {
  vertical-align: baseline; /* 对齐默认文本基线 */
  line-height: inherit; /* 继承父元素行高，确保和周边文本一致 */
}

如果父元素行高未明确设置，可以直接指定数值（比如line-height: 1.5，和你的默认文本行高匹配）。

3. 微调视觉偏移 #

如果字体本身的度量（ascent/descent）导致视觉上仍偏下，用transform或相对定位微调位置：

span.status-stop {
  /* 向上偏移修正底部过高问题，数值根据实际视觉效果调整 */
  transform: translateY(-2px);
  /* 或者用相对定位：position: relative; top: -2px; */
}

4. 用inline-block精确控制高度 #

如果行内元素高度仍不受控，改为inline-block后可以更精准地控制高度和对齐：

span.status-stop {
  display: inline-block;
  height: 1em; /* 基于当前字号匹配默认文本高度 */
  vertical-align: middle;
  line-height: 1em; /* 让文本在块内垂直居中 */
  padding: 0;
}

额外注意事项 #

• 用浏览器开发者工具的「盒模型」面板查看元素的实际padding、line-height和高度值，针对性调整参数
• 验证不同浏览器的渲染效果，部分浏览器对自定义字体的度量计算可能存在差异
• 检查自定义字体的@font-face声明，确保font-weight、font-style等属性与使用场景匹配，避免浏览器 fallback 到其他字体

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