line-height未生效的根本原因是其作用对象为行框而非文字本身，单行文本时浏览器会压缩行框高度；推荐使用无单位数值（如1.5），避免固定像素值导致响应式问题。
line-height 设置数值时为什么没生效
常见现象是写了 line-height: 20px 或 line-height: 1.5，但段落行距看起来没变化。根本原因在于：行高作用对象是**行框（line box）**，不是文字本身；如果块级元素里只有一行文本、且没有换行或 <br>，浏览器会把行框高度“压缩”到刚好容纳内容，视觉上就看不出效果。
实操建议：
- 确保文本足够长、自然换行，或手动插入
<br>制造多行 - 给容器加
border或background-color，方便观察行框实际高度 - 避免对单行内联元素（如
<span></span>）单独设line-height，它不会影响父行框——要调整个体行距，得设在父块级元素（如<p></p>、<div>）上<h3>用无单位数值 vs px/em/% 的区别</h3> <p><code>line-height接受多种值类型，行为差异很大：-
line-height: 1.5（无单位）：最推荐。它是相对于当前元素font-size的倍数，会继承并参与子元素计算，响应式友好 -
line-height: 24px（固定像素）：强制行高为 24px，不随字体大小缩放，移动端易出问题 -
line-height: 150%：和1.5看似一样，但它是**继承计算后的绝对值**——父设line-height: 150%，子元素若改了font-size，行高不会按新字号重新算，容易断层
body { font-size: 16px; line-height: 1.5; /* ✅ 推荐：子元素 font-size 变成 20px，行高自动变成 30px */ } h1 { font-size: 20px; /* 行高 = 20px × 1.5 = 30px */ }段落首行缩进 + 行距同时设置的坑
中文排版常要
text-indent: 2em+ 调整行距，但容易误用padding-top或margin-top代替line-height，导致首行缩进失效或上下间距不均。
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 首行缩进只用
text-indent，别碰 margin/padding - 行距统一用
line-height控制，它不影响缩进逻辑 - 如果发现首行缩进“被吃掉”，检查是否父容器有
overflow: hidden或字体渲染异常（比如用了非标准中文字体且未声明font-family）
p { font-size: 16px; line-height: 1.75; /* 行距宽松些，适合中文阅读 */ text-indent: 2em; /* 首行缩进两个汉字宽度 */ margin: 0; /* 清除默认段落外边距，避免叠加 */ }flex 容器里 line-height 失效怎么办
当
<p></p>放在display: flex的父容器中，有时line-height看似无效，其实是 flex 项默认align-items: stretch拉伸了高度，掩盖了行高效果。解决方法：
- 给 flex 子项（即段落）加
align-self: flex-start - 或直接在 flex 容器上设
align-items: flex-start - 更稳妥的是：确认段落是否被设了
height或min-height——这些会压制line-height的自然扩张
真正容易被忽略的点是：line-height 不是“行与行之间的空白”，而是**整行内容所占的最小高度**。它既撑开上下行文字距离，也决定单行文本的垂直居中基准线。调得太小会挤字，太大又浪费空间，中文建议值在
1.6–1.8之间比较安全。 -
