index.html里如何设置字体的行高？-html教程-PHP中文网

css 的 line-height 用于控制行高，html 无此属性；应使用无单位数值（如1.6），避免 px 或过小值（

index.html里如何设置字体的行高？

用 CSS 的 `line-height` 控制行高，不是 HTML 属性

HTML 本身没有“设置行高”的属性，index.html 里必须靠 CSS 实现。直接在或具体文本元素（比如 <p></p>、<h1></h1>）上加 style 或引入样式表，才能生效。

常见错误是试图写成：<p line-height="1.6">...</p> —— 这完全无效，浏览器会忽略。

line-height 推荐用无单位数值（如 1.6），它相对于当前字体大小计算，响应式友好
避免用 px（如 24px），否则在不同字号下行距会僵硬甚至重叠
别设太小（如 0.8），中文容易挤在一起，可读性差；常规正文建议 1.4–1.7

在 `index.html` 里快速写内联样式

如果只是临时调试或单页小项目，可以直接在标签里用 style：

<p style="line-height: 1.5; font-size: 16px;">这段文字行高是字号的 1.5 倍</p>

注意：line-height: 1.5 表示行高 = 当前 font-size × 1.5，不是固定像素值。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

如果没显式设 font-size，就按父级继承的字号计算
行高会同时影响上下行间距，不是“只加下面空白”
块级元素（如 <div>）设 <code>line-height 只对内部行内内容起作用，不影响自身 margin
用 <style></style> 标签统一控制全文本行高

更合理的方式是在里加 <style></style>，避免重复写 style：
```
  <style>
    body { line-height: 1.6; }
    h1, h2 { line-height: 1.2; }
    p { line-height: 1.5; }
  </style>
```
这样比内联更易维护，也符合层叠逻辑。特别注意：
- body 上设 line-height 会被大多数文本元素继承，但标题通常需要更紧凑，所以单独覆盖
- 若用了 CSS 框架（如 Bootstrap），它的基础样式可能已设了 line-height，需用开发者工具检查实际计算值
- 某些字体（如思源黑体）字形偏高，即使 line-height: 1.5 也可能显得紧，可微调到 1.55 或 1.6
行高和垂直居中不是一回事

新手常误以为设了 line-height 就能让文字在容器里垂直居中——这只对单行文本有效，且前提是容器高度固定、无 padding/margin 干扰。

例如：
```
<div style="height: 40px; line-height: 40px; border: 1px solid #ccc;">单行文本</div>
```
这样能居中；但两行以上就会溢出或错位。
- 多行文本垂直居中要用 display: flex 或 grid，不是靠 line-height
- line-height 影响的是行框（line box）高度，不是容器的对齐方式
- 移动端 Safari 对小字号 + 小 line-height 渲染有时异常，建议最小字号不小于 14px，line-height 不低于 1.3
行高看着简单，但真正调得舒服需要结合字体、字号、设备和阅读场景反复看实际效果，尤其要注意中英文混排时英文字母可能被截顶——这往往不是行高设低了，而是字体本身的 ascender/descender 范围没预留够。