使用行高单位优化排版
几十年来，在网页上创建精美布局一直是可能的，但通常将细节精益求精到完美需要付出大量努力。可以说，这需要付出过多的努力，而开发人员根本没有时间。令人高兴的是，过去几年 CSS 涌现出许多新工具，有时是非常简单的工具，当它们以巧妙的方式使用时，突然使图形设计细节的优化变得异常简单。其中一种工具就是 lh 单位。
行高单位
网页获得了 lh 和 rlh 这两个新单位来参照行高，这似乎没什么大不了的。2023 年，所有浏览器都悄无声息地支持了它们。但它们的力量令人惊叹。
基本上，1lh 等于当前字体在当前行高下的单行文本高度。“LH”是 Line Height（行高）的缩写。附带的 1rlh 单位等同于根元素的单行行高，就像 rem 是根元素的 em 一样。“RLH”是 Root Line Height（根行高）的缩写。
我最喜欢用 lh 单位做的事情是设置内容的边距。让我们为段落设置一个新的通用边距，使用
p { margin-block: 1lh; }
您可以在以下截图中看到效果。左侧，块方向的边距设置为 1em，这是自 90 年代以来用户代理（UA）样式表中的默认值。右侧则更改为 1lh。
许多对布局和间距有眼光的人可以立即看出区别。您可能会同意，右侧的版本看起来更精致。它显得更考究。而左侧的版本看起来有点笨拙。它看起来，嗯，就像几十年来网页上所有东西的样子。略显笨拙。
许多其他人会看到这个比较并想“我没看出来”或“这有什么大不了的”？让我们在文本上绘制一个网格线，使差异更清晰。希望现在更明显的是，当段落之间的空白空间以 lh 单位定义时，它等同于一行文本的高度。
行高单位为我们提供了一种直接的方式，将布局中的任何尺寸与文本的垂直韵律关联起来。边距只是一种可能性——内边距是另一种，还有间隙、宽度和高度，或布局中的任何其他度量。
亲自尝试
您可以在这个演示中尝试不同选项组合，查看使用 lh 设置段落边距的效果。
浏览器支持
行高单位受到当今人们使用的 94% 以上浏览器的支持。对于剩余的 6%，您可以使用渐进增强来确保他们获得良好的体验。例如
article {
padding: 1em; /* fallback for browsers lh without support */
padding: 1lh;
}
使用这种技术，不支持的浏览器将渲染 1em 的内边距，而支持的浏览器将渲染 1lh 的内边距。
将您的排版提升到新水平
现在确实是网页排版的好时机。过去几年发布了十几个小功能，使网页设计师和开发人员能够将排版细节打磨得更好，特别是以那种易于实现的健壮性，使其切实可行。我希望您能使用它们！