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 适合做排版，

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

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

进阶

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

blockquote {
  border-left: 0.25lh solid #ccc; /* 左边框宽度和行高成比例 */
  margin: 1lh 0;
}