PSD转HTML：文本上下多余留白消除及像素级间距匹配咨询

一、先明确：文本上下的留白本质是什么？ #

你看到的「多余留白」并非元素的margin/padding，而是字体本身的内置度量空间——包括字体的上升部（ascender）、下降部（descender）和行间隙（line gap），浏览器渲染文本时会默认保留这些空间，大字号下视觉差异会被放大。

二、如何消除这些留白？ #

1. 用现代CSS属性leading-trim（推荐方案） #

这是CSS专门针对字体留白推出的属性，能精准裁剪文字上下的多余内置空间：

.your-text-element {
  font-size: 80px;
  leading-trim: both; /* 同时裁剪上下留白 */
  text-edge: cap; /* 以大写字母的顶部/底部为边界对齐，匹配PSD的视觉基准 */
  /* 若PSD是按基线对齐，改用text-edge: alphabetic */
}

注意：Chrome、Edge、Safari 16.4+已支持该属性，如需兼容旧浏览器，使用下面的手动计算方案。

2. 手动计算并设置line-height #

先确定字体的实际渲染数据（可通过FontForge查看字体文件，或用JS获取元素渲染高度）：

• 假设字体font-size为80px，实际文字渲染高度为70px（元素offsetHeight减去上下留白总和）
• 直接将line-height设为文字实际高度，配合vertical-align调整对齐：

.your-text-element {
  font-size: 80px;
  line-height: 70px; /* 等于文字实际渲染高度 */
  vertical-align: top; /* 对齐文字顶部，消除上方留白 */
}

同时要重置全局样式，避免额外干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

三、实现与PSD完全一致的垂直间距 #

如果无法完全消除留白（比如兼容旧浏览器），需要精准计算留白高度，再调整margin值：

1. 计算文本元素的上下留白：
   • 用JS获取文本元素的offsetHeight，再减去包裹文字的span元素（设置line-height: 1）的offsetHeight，差值就是总留白高度
   • 拆分出顶部和底部留白的具体数值
2. 调整margin匹配PSD：
   比如PSD中标题下方间距为60px，HTML中设置的margin-bottom应为：

   margin-bottom: 60px - 元素底部留白高度
   

   举例：若H1元素底部留白为10px，设置margin-bottom: 50px即可让视觉间距和PSD完全一致。

补充说明 #

• 替换标签（div/p/h1）无效，因为留白来自字体本身，和标签默认样式无关
• 更换字体没用，所有字体都有内置的度量空间，只是不同字体的留白大小有差异

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