今天要和大家聊的leading-trim既是一个简单的属性，但又是一个复杂的体系。为什么这么说呢？如果我们从CSS属性的角度出发，那他是一个简单的属性，我们只需要知道他有哪几个值，每个值的作用是什么，这样就有实现需要的效果。如果我们从排版的角度出发，那他又是一个复杂的体系，因为要彻底的掌握他们，我们需要掌握的东西太多，有设计方面的，有文字排版方面的，也有CSS的其他属性等。但是，leading-trim的确能帮助我们Web开发者解决一些排版上的烦恼，特别是行与行间距方面的烦恼。如果你对这方面感兴趣的话，欢迎继续往下阅读。

背景：间距给我们带来的烦恼

不知道你们是不是也跟我一样碰到这样的排版烦恼，特别是在UI还原的过程中，文本框之间或者说文本框和其他对象之间的间距总是和最终需要的诉求有所偏差。在视觉走查过程中，CSS实现的效果和设计师想要的效果总是有一定的偏差，即 有额外的空间存在。

就拿标题和下面的矩形框为例：

<div class="container">
    <h2>初一赛事报告</h2>
    <div class="box"></div>
</div>

实际效果，标题<h2>和div.box之间的间距和设计稿还是有一定差异：

就上面示例而言，<h2>的行高是line-height: 1.15，如果你将其line-height设置为1，可以看到他们之间的差异：

换句话说，当使用边界框来度量空间时，它最终会比我们预期的要大。而且line-height越大，这样的问题越大。如果上面的示例还不够明显的话，我们来看下面这个例子，设计是通过测量边框之间的空间来创建的。当所有的间距被设置为32px时（在第一张卡片中），所有的垂直间距实际上比32px大得多（正如在第二张卡片中所示），即使你将它们全部设置为32px。

这是一个跨越工具和平台的常见问题。这也是众多Web前端开发者在还原UI时最易于碰到的问题，这也是在视觉走查过程中最易于和视觉设计师有冲突的问题。而且这个现象对于Web开发者都在寻找易于解决的方案，直到去年6月份，CSS的规范（CSS Inline Layout Module Level 3）中提出了leading-trim属性，它可以帮助我们解决上述提到的问题。

造成这种现象是有一定的历史原因

在Web排版上来说，这是一直存在的一种现象，造成这种现象是有一定原因的。如果我们要说清楚造成这种现象真正的原因，那就是需要从字体设计开始说起。

在铅字由金属制成的年代，事情要简单得多。那个时候只有两个角色：类型设计师（Type Designer）和 排字工人（Typesetter）。他们的工作受到物理宇宙规则的限制。

到了19世纪末期，制造行业已经掌握了大部分的基本技术，这也起到了推波助澜的作用。字体的生命从纸上开始，字体设计师将花费数周或数月的时间来勾勒出所有必要的字体形式。完成之后，字体的图纸就变成了一种字体：

实际上就是铅块！

你需要为每个字母购买一个或多个这样的字母块。你还需要炎不同大小的文本购买额外的金属块。但是字体大小并不是用字母的大小来定义的，而是用金属块的高度来表示，用一个叫做点的单位来表示（每个点是1/72英寸，也就是0.4毫米）。块的高度是已知的，但在其中，类型设计师可以做任何他们想做的事情：相同大小的字体可以更大或更小，它们的基线（baseline），即每个字母所在的行，可以更高或更低，等等。

当字体完成和字体制作好后，雇佣设计师的铸造厂将把它们卖给印刷厂。反过来，他们会雇佣排字工，他们的工作是把这些金属块排列成单词，然后是名子，然后是段落，然后是页面。