HTML中CSS letter-spacing和word-spacing调整字间距的方法-html教程-PHP中文网

letter-spacing是唯一能直接拉开汉字间距的css属性，它对所有字符一视同仁；设letter-spacing: 2px会使“欢”和“迎”间增加2px空隙，但负值需谨慎，中文建议不超过-0.03em并配line-height: 1.6以上防粘连。

html中css letter-spacing和word-spacing调整字间距的方法

letter-spacing 是唯一能直接拉开汉字间距的 CSS 属性

它对每个字符（汉字、英文字母、数字、标点）一视同仁，不管有没有空格，都能生效。比如 <p>欢迎来到首页</p> 这种纯中文无空格结构，设 letter-spacing: 2px 就会让“欢”和“迎”之间多出 2px 空隙。

常见错误是照搬英文经验，直接写 letter-spacing: -2px 收紧小字号中文——14px 字体下，“口”“田”“目”类字极易笔画重叠。实际建议：负值不超过 -0.03em，且必须配 line-height: 1.6 以上防上下行粘连。

还要注意继承污染：letter-spacing 会透传给子元素，如果按钮里嵌了 <span>NEW</span>，那段英文也会被拉宽。必要时用 span { letter-spacing: normal; } 单独重置。

word-spacing 对纯中文基本无效，只认源码里的空格

浏览器把“词”定义为被原始空白符（空格、\t、\n）分隔的连续非空白字符。所以 <p>立即购买</p> 整段被当做一个词，word-spacing: 5px 完全没反应。

只有你手动在 HTML 里加空格，比如 <p>立即购买</p>，word-spacing 才会在“即”和“购”之间插空隙。但这带来三个问题：

语义污染：HTML 里塞空格破坏可读性和 SEO
响应式灾难：窄屏下这个固定空隙可能撑破容器
维护成本高：所有中文词都要人工拆分，无法自动化

混排场景下它只影响英文部分，例如 <p>联系我们 Contact us</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5988" title="Adwords"><img src="https://img.php.cn/upload/skill/000/000/081/179074984984219.jpg" alt="Adwords" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5988" title="Adwords" class="overflowclass">Adwords</a> <p class="overflowclass">营销文案助手。标题公式(100个)、正文写作、AIDA框架、痛点挖掘、客户证言、落地页文案。Copywriting with 100 headline formulas, body copy, AIDA framework, pain points, testimonials.</p> </div> <a rel="nofollow" href="/xiazai/skill5988" title="Adwords" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 中，word-spacing 只撑开 “Contact” 和 “us” 之间。

letter-spacing 和 word-spacing 混用时效果叠加，但作用对象完全不同

两者独立计算，但最终渲染是相加的。比如：

button {
  letter-spacing: 1px;
  word-spacing: 4px;
}
<button>立即 购买</button>

结果是：“立”与“即”间 +1px，“即”与空格间 +1px，空格与“购”间 +4px（word-spacing），再加“购”与“买”间 +1px —— 实际看到“即”到“购”之间有 6px 间隙，远超预期。

调试时别只看 Styles 面板，务必切到浏览器开发者工具的 Computed 面板，查 letter-spacing 和 word-spacing 的最终数值，才能看清真实生效值。

移动端和表单元素上要格外小心

letter-spacing 在 iOS Safari 上对小字号（如 font-size: 12px）+ 负值的组合渲染不稳定，真机测试不可跳过；部分 Android WebView 对 input 或 textarea 的支持也不一致，有些直接忽略该属性。

还有两个容易被忽略的点：

不要在或全局选择器上乱设 letter-spacing，会导致数字（如 12345）被断开成 1 2 3 4 5
某些字体（如 Inter、HarmonyOS Sans）本身带可变轴（font-stretch），此时再叠一层 letter-spacing，Chrome 和 Safari 渲染结果可能不一致

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！