如何去除HTML中文本的上下间距，实现类Photoshop排版效果？

以下是几种实现无上下间距文本排版的可行方案，可根据浏览器兼容性需求选择：

1. 基于字体完整度量值优化line-height #

仅使用CapsHeight只能覆盖大写字母区域，若要适配所有字符（包括小写字母、带升降部的字符），建议结合字体的Ascent（字符顶部到基线的距离）和Descent（基线到字符底部的距离）属性计算精准的line-height，这能完全贴合字体的实际字符高度，消除多余间距。

C#后端代码示例：

style = $"line-height: {(font.Ascent + font.Descent)}em;";

该方法兼容性好，适用于所有主流浏览器。

2. 使用CSS leading-trim 属性（现代浏览器专属） #

这是CSS专门为修剪文本上下多余间距设计的属性，无需手动计算字体度量，直接配置即可实现类Photoshop的文本边缘对齐：

.text-element {
  leading-trim: both;
  text-edge: cap; /* 对齐大写字母的顶部和底部，也可选择text-edge: alphabetic;对齐基线 */
}

注意：leading-trim目前仅支持Chrome、Edge等现代浏览器，若需兼容旧版浏览器，需搭配方案1使用。

3. 结合vertical-align微调对齐 #

部分字体的默认对齐会存在微小偏移，可通过vertical-align属性配合精准的line-height进一步调整：

.text-element {
  line-height: 1.1em; /* 或基于字体度量的精确值 */
  vertical-align: text-top;
}

如果是固定像素字号，也可将line-height设置为字体的实际像素高度（通过C#计算font.Ascent * fontSize与font.Descent * fontSize的和），再配合vertical-align: text-top消除顶部间隙。

4. 用inline-block容器消除默认间距 #

将文本放入inline-block容器中，清除容器的默认内外边距，再配合精准的line-height设置，避免容器自带的排版间距：

.text-container {
  display: inline-block;
  padding: 0;
  margin: 0;
  line-height: calc(var(--font-ascent) + var(--font-descent))em;
}

后端可通过注入CSS变量传递字体度量值：

style = $"--font-ascent: {font.Ascent}; --font-descent: {font.Descent};";

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