网页文字间距：HTML文档结构中的属性调节-html教程-PHP中文网

letter-spacing 控制字符间距，影响汉字、字母、标点间的水平空隙；word-spacing 对中文基本无效，仅作用于空格分隔的单词；line-height 决定行框高度而非段间距，段间距应由 margin 控制。

网页文字间距：html文档结构中的属性调节

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）
避免对全局设置，否则数字（12345）可能被拆开成 1 2 3 4 5，表单 <input> 在部分浏览器中会失效或错位
内联元素如 <strong></strong> 或图标字体（Font Awesome 的 <i></i>）也会被影响，建议只包裹需要调整的文本节点，而不是直接挂在 <p></p> 上

word-spacing 对中文基本无效，别拿它调标题汉字间距

word-spacing 只对“单词”生效，而浏览器识别单词依赖空格或标点分隔。中文段落里没空格，所以给 <p></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></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 之间的空白。设成 1.8，只是让段内每行文字离得更开；两段文字之间的距离，还是由 margin-bottom 和 margin-top 决定，且会发生外边距合并。

例如连续两个 <p style="margin-bottom: 20px"></p>，实际视觉间距仍是 20px，不是 40px。这是最容易被忽略的布局陷阱。

优先用无单位数值（如 1.6），它随字体大小缩放；避免用 px（如 24px），子元素字体变大后行高就卡死，极易重叠
中文排版常用 1.5–1.8，英文可略低（1.4–1.6）；设太小（）会导致 ascent/descent 被截断
如果父容器设了 line-height，子元素如 <span></span> 或 <em></em> 会继承，但 <h1></h1> 等标题通常有浏览器默认值，需单独重置

段落间距靠 margin，不是 br 或空 p

两个 <p></p> 之间的空白，本质是浏览器给 p 默认加的 margin-bottom（通常是 1em）。想改间距，直接调 margin-bottom 最可靠；用 <br> 或空 <p></p> 属于结构污染，语义错误、响应式错乱、读屏器误读。

复杂布局中可用 gap：把多个 <p></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></p> 自身盒模型，背景色范围变宽，还可能触发意外滚动条