使用行高单位来润饰你的排版
主要观点:几十年来在网页上创建华丽排版已成为可能,但完善细节需大量精力,CSS 近几年出现的新工具如lh
单位使抛光图形设计细节变得容易。
关键信息:
lh
单位:等于当前字体在当前行高下一行文本的高度,1rlh
单位是根元素的行高,用p { margin-block: 1lh; }
可设置段落边距,能使排版更精致,对比1em
边距更明显。- 浏览器支持:超过 94%的浏览器支持
lh
单位,对不支持的浏览器可使用渐进增强,如article { padding: 1em; padding: 1lh; }
。 - 可尝试:在此演示中尝试使用
lh
设置段落边距的效果。
重要细节:通过在文本下画线条网格可更清晰看出lh
单位设置边距的效果差异,如今是网页排版的好时机,有十多个小功能可帮助提升排版细节。可在Bluesky或Mastodon上分享想法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。