css `lh`单位

  1. lh 是什么?

lh 代表 line-height 单位,意思是「当前元素的行高」。

它的计算方式是:

1lh = 当前元素计算后的 line-height 的值

所以:

如果元素的 line-height: 20px;,那么 1lh = 20px

如果 line-height: 1.5; 且字体大小是 16px,那么 1lh = 1.5 * 16px = 24px

使用场景

lh 适合做排版,

javascript 复制代码
p {
  line-height: 1.5; /* 假设 font-size 是 16px,那么 1lh = 24px */
  margin-bottom: 1lh; /* 让段落间距刚好等于一行的高度 */
}

无论字体大小怎么变化,段落间距都会自适应

进阶

javascript 复制代码
button {
  line-height: 1.2;
  padding: 0.5lh 1lh; /* 内边距随行高缩放 */
}

blockquote {
  border-left: 0.25lh solid #ccc; /* 左边框宽度和行高成比例 */
  margin: 1lh 0;
}
相关推荐
做运维的阿瑞18 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
Dontla20 小时前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
yinuo20 小时前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友1 天前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程1 天前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel1 天前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
双向331 天前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下1 天前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友1 天前
什么是基础设施中间件
前端·后端
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发