letter-spacing 控制字符间距，影响汉字、字母、标点间的水平空隙；word-spacing 对中文基本无效，仅作用于空格分隔的单词；line-height 决定行框高度而非段间距，段间距应由 margin 控制。
letter-spacing 控制字符间距，不是“字间距”这个名词本身
HTML 没有叫“字间距”的原生属性，真正起作用的是 CSS 的 letter-spacing。它管的是每个字符（汉字、英文字母、标点）之间的水平空隙，和字体大小、行高都无关。
常见误解是设成 0 就等于“没空隙”，其实浏览器默认用 normal，而这个值因字体不同而异——比如 Noto Sans CJK 和 SimSun 渲染出来的默认间隙可能差 0.5px；设负值（如 -0.5px）能收紧，但小字号下容易粘连，尤其在移动端 Safari 中渲染不稳定。
-
px单位最直观，适合固定设计稿场景；em更适配响应式，按当前font-size计算（0.05em在 16px 字体下就是 0.8px） - 避免对
<body>全局设置，否则数字（12345）可能被拆开成1 2 3 4 5，表单<input>在部分浏览器中会失效或错位 - 内联元素如
<strong>或图标字体（Font Awesome 的<i>）也会被影响，建议只包裹需要调整的文本节点，而不是直接挂在<p>上
word-spacing 对中文基本无效，别拿它调标题汉字间距
word-spacing 只对“单词”生效，而浏览器识别单词依赖空格或标点分隔。中文段落里没空格，所以给 <p> 设 word-spacing: 2px，大概率什么都不会变；但里面夹着的英文链接或邮箱（如 contact@example.com）反而会被撑开。
典型误用：想让「联系我们」四个汉字等距拉开，结果只看到「contact us」被拉长，汉字依旧紧贴。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 仅建议用于明确含空格的文本，比如按钮文字写成
<button>登 录</button>（中间加空格），再配合word-spacing微调 - 和
letter-spacing同时存在时效果叠加，容易失控，调试时优先关掉一个再观察 - 在 Flex/Grid 容器中，
word-spacing可能被对齐方式覆盖，优先级低于letter-spacing
line-height 控制行高，不是段落间距
line-height 决定的是同一块文本内部“行框高度”，不是两个 <p> 之间的空白。设成 1.8，只是让段内每行文字离得更开；两段文字之间的距离，还是由 margin-bottom 和 margin-top 决定，且会发生外边距合并。
例如连续两个 <p style="margin-bottom: 20px">，实际视觉间距仍是 20px，不是 40px。这是最容易被忽略的布局陷阱。
- 优先用无单位数值（如
1.6），它随字体大小缩放；避免用px（如24px），子元素字体变大后行高就卡死，极易重叠 - 中文排版常用
1.5–1.8，英文可略低（1.4–1.6）；设太小（<1.1）会导致 ascent/descent 被截断 - 如果父容器设了
line-height，子元素如<span>或<em>会继承，但<h1>等标题通常有浏览器默认值，需单独重置
段落间距靠 margin，不是 br 或空 p
两个 <p> 之间的空白，本质是浏览器给 p 默认加的 margin-bottom（通常是 1em）。想改间距，直接调 margin-bottom 最可靠；用 <br> 或空 <p> 属于结构污染，语义错误、响应式错乱、读屏器误读。
复杂布局中可用 gap：把多个 <p> 包进 display: flex; flex-direction: column 容器，再设 gap: 24px，能绕过外边距合并，行为可预测。但 IE 不支持，兼容老环境得回退到 margin。
- 只设
margin-bottom即可，避免同时设margin-top引发冗余计算 - 首段顶部、末段底部不需要额外空白？用
p:first-child { margin-top: 0; }和p:last-child { margin-bottom: 0; } - 别用
padding替代margin：它会撑大<p>自身盒模型，背景色范围变宽，还可能触发意外滚动条
letter-spacing、line-height、margin 三者职责分明，混用前务必确认目标层级——是单个字、单行字、还是段与段之间。字体加载未完成时的 fallback 行为、可变字体的内置密度调节，也会叠加影响最终效果，真机测试不能跳过。 
