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;
}
相关推荐
渣渣盟2 分钟前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_93 分钟前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖20 分钟前
Webpack系列-Loader
前端·webpack
aggression23 分钟前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo24 分钟前
深入理解与实战 Git Submodule
前端
骑自行车的码农25 分钟前
React 事件收集函数
前端·react.js
一个处女座的程序猿O(∩_∩)O28 分钟前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry33 分钟前
JavaScript 原型
前端·javascript
用户904438163246043 分钟前
前端也能玩 AI?用 brain.js 在浏览器里训个 "前后端分类大师",后端同事看了都沉默!
前端
祈祷苍天赐我java之术44 分钟前
什么是Nginx?:掌握高性能 Web 服务器核心技术
服务器·前端·nginx