直接修改CSS的line-height、letter-spacing、writing-mode可覆盖浏览器默认排版,而HTML标签仅提供语义;align属性在HTML5中已废弃,必须用text-align等CSS控制对齐。

直接改 style 或外部 CSS 里的 line-height、letter-spacing、writing-mode 这三个属性,就能覆盖浏览器默认排版行为;只靠 <p> 和 <h1> 标签本身做不到“修改排版”,它们只负责语义。
为什么改了 <p align="center"> 没效果
这个写法早已废弃:align 属性在 HTML5 中无效,多数浏览器会忽略它,或触发 quirks 模式导致样式解析异常。现代标准必须用 CSS 的 text-align。
- 错误写法:
<p align="center">文字</p> - 正确写法:
<p style="text-align: center;">文字</p>或加 class 后统一控制 - 若用了 CSS 框架(如 Bootstrap),
text-align可能被更高优先级规则覆盖,需检查 computed styles
line-height 和 letter-spacing 怎么配才不翻车
这两个值不是越大越好看,而是要匹配字体大小和语言习惯。中文正文常见组合是:font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。
-
line-height必须用无单位数值(如1.6),避免用px—— 否则缩放页面时行高会断裂 -
letter-spacing推荐用em单位,比如0.03em在 14px 字体下约 0.42px,在 20px 下约 0.6px,比例稳定 - 中英文混排时,西文对字距更敏感,可加
text-rendering: optimizeLegibility微调 - 负值(如
-0.5px)慎用,中文易粘连,尤其在小字号或低 DPI 屏幕上
实现中文竖排必须用 writing-mode: vertical-rl
别再用 transform: rotate(90deg) 或手动每个字套 <span> —— 那样文本不可选、无法复制、SEO 失效,响应式一塌糊涂。
立即学习“前端免费学习笔记(深入)”;
- 基础写法:
div { writing-mode: vertical-rl; text-orientation: upright; } - 必须设固定宽度(如
width: 6em),否则浏览器无法判断“一行多宽”,换行逻辑崩溃 - 父容器不能是
display: inline或float,这些会绕过现代布局引擎,导致writing-mode被忽略 -
text-align: center在竖排里表示垂直居中(即上下居中),不是左右居中——方向逻辑和横排相反,容易踩坑
真正难的不是写对那几行 CSS,而是意识到:所有排版控制都发生在 CSS 层,HTML 标签只是语义容器;一旦忽略 dir 属性对双向文本的影响,或没处理好 font-size 的继承链,再细的 letter-spacing 也救不回可读性。



















