HTML怎么设置行高_html line-height行高设置技巧 一文搞懂

line-height 应设在包含文本的容器元素（如 p、div、td、body）上，优先用无单位数字（如 1.6），表格中需设在 td/th 上并配合 height、vertical-align 等控制高度。

直接用 line-height，别碰 height 或 HTML 旧属性（如 cellpadding）——这是最稳、最可控的方式。

line-height 应该写在哪个元素上

写在**包含文本的容器元素**上，比如 p、div、td、body。它会自然继承给子级行内内容，不需要逐个设到 span 或 a 上。

• 设在 body 是最省事的起点：body { line-height: 1.6; }，正文段落基本不用再调
• 标题要更紧凑，可单独覆盖：h1 { line-height: 1.2; }
• 表格单元格必须设在 td 或 th 上，tr 的 height 属性在 Chrome 中基本无效，别依赖
• 如果设在父 div 里，但里面是 display: flex 或 grid 布局，line-height 不起作用——它只对“形成行框”的文本流有效

用无单位数字还是 px？

优先用**无单位数字**（如 1.5），除非你明确需要固定像素高度（比如后台数据表格单行锁定 40px）。

• 无单位值基于当前元素的 font-size 计算，响应式友好；子元素换字号，行高自动同比例缩放
• px 值（如 24px）不随字体变化，适合严格控高的场景，但移动端缩放或用户调整字号时易出错
• 百分比（如 150%）看似等价，但继承的是计算后的绝对值，不是比例——嵌套多层后容易失控
• 避免混用：比如父级设 line-height: 1.5，子级又设 line-height: 20px，可能破坏垂直节奏

表格里行高总被内容撑开怎么办

核心矛盾是：浏览器对表格布局的渲染逻辑和普通块级元素不同，height 在 tr 上不可靠，line-height 又只管文字行距，不管图片或 padding。

立即学习“前端免费学习笔记（深入）”；

• 单行纯文本：给 td 同时设 height: 40px + line-height: 40px + vertical-align: middle + box-sizing: border-box + padding: 0
• 含图片或多行文本：放弃 height，改用 max-height: 80px + overflow: hidden + display: -webkit-box 截断，或直接用 flex 重写单元格结构
• border-collapse: collapse 必须加，否则 cellspacing 和 cellpadding 属性已废弃，且分离模式下边框叠加会让高度飘忽
• 动态渲染（React/Vue）中高度跳变，大概率是字体未加载完或图片没占位——加 font-display: swap 和 min-height 预留空间

为什么设了 line-height 却没生效

常见原因不是语法错，而是被其他规则压制或盒模型干扰。

• 检查是否被更高权重样式覆盖：用浏览器开发者工具看“Computed”面板里的 line-height 实际值，不是“Styles”里有没有写
• 父级设置了 font-size: 0（常用于清除 inline 元素间隙），会导致无单位 line-height 计算结果为 0 —— 此时子元素必须显式设 font-size
• display: inline-block 或 float 元素若没设 vertical-align，可能让行框高度异常拉伸
• 使用了 transform: scale() 或 zoom 等缩放属性，会干扰行高渲染，尽量避免

真正难的不是怎么写 line-height，而是判断它该不该生效——比如 flex 容器里的文字、absolute 定位的标签、或者被 font-size: 0 搞乱的上下文。这些地方写上也没用，得换思路。