CSS如何设置元素背景尺寸与文本内容最高字符的高度一致

解决方案 #

1. 现代浏览器原生实现（推荐）

使用CSS新增的文本边距裁剪属性，可精准匹配字符实际高度，无需手动微调：

.target-element {
  /* 裁剪掉字体自带的上下留白 */
  leading-trim: both;
  /* 文本边界对齐大写字母顶部/字符最低点，刚好匹配最高/最低字符高度 */
  text-edge: cap alphabetic;
  line-height: 1;
  background: #你的背景样式;
  /* 按需调整左右内边距，不要加上下内边距 */
  padding-inline: 0.2em;
}

该方案支持Chrome 115+、Firefox 123+、Safari 17.4及以上版本。

2. 全浏览器兼容方案

如果需要覆盖更低版本浏览器，可以通过负边距手动调整偏移量，数值根据你使用的字体微调即可：

.target-element {
  display: inline-block;
  line-height: 1;
  background: #你的背景样式;
  padding: 0 0.2em;
  /* 上下负边距抵消默认行高和字体内置留白，数值一般在0.1~0.2em区间 */
  margin: -0.15em 0;
}

如果需要支持多行文本的背景贴合，把display改为inline，额外添加box-decoration-break: clone;属性即可。

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