如何通过CSS降低HTML<sup>上标的显示高度（WordPress适用）

操作路径 #

直接将自定义CSS代码粘贴到WordPress后台「外观 → 自定义 → 额外CSS」面板，保存发布即可生效，无需修改主题核心文件。

核心调整代码 #

基础覆盖样式，可根据实际显示效果微调参数：

/* 全局调整所有<sup>上标元素的显示位置 */
sup {
  /* 重置上标默认垂直对齐基准 */
  vertical-align: baseline;
  /* 启用相对定位实现位置偏移 */
  position: relative;
  /* *垂直偏移量*：正值为向下移动，负值为向上移动，可按需调整数值大小 */
  top: 0.3em;
  /* 统一上标字号，避免因主题样式差异出现字号过大/过小问题 */
  font-size: 0.75em;
  /* 修正行高，避免位置偏移后挤压正文行间距 */
  line-height: 0;
}

参数调整说明 #

• 若当前上标位置仍然过高，可逐步增大top后的数值（比如从0.3em调整为0.4em、0.5em），数值越大上标下移幅度越大
• 若调整后上标与正文文字基线过于贴近，可适当减小top后的数值（比如从0.3em调整为0.15em）
• 若只需调整脚注类上标（不影响页面其他位置的上标元素），可单独增加针对脚注类名的规则：

/* 单独调整脚注场景的上标位置 */
sup.footnote,
sup[id^="fn"] {
  top: 0.25em;
  font-size: 0.7em;
}

高优先级兼容写法 #

如果保存CSS后前台样式无变化，说明当前主题对sup的样式设置优先级更高，可使用带优先级标记的覆盖写法：

body sup {
  vertical-align: baseline;
  position: relative;
  top: 0.3em !important;
  font-size: 0.75em !important;
  line-height: 0 !important;
}

调整完成后，刷新前台带脚注、上标引用的文章页面，微调top数值直到显示位置符合预期即可。

内容的提问来源于stack exchange，提问作者Stefan Müller