HTML标签仅负责语义，排版必须由CSS实现；text-align需作用于块级父容器才有效；line-height宜用无单位值，letter-spacing推荐em单位；竖排应使用writing-mode: vertical-rl并配text-orientation: upright。

HTML 标签本身不负责排版样式，只负责语义；所有“精美排版”都必须靠 CSS 实现。 直接写 <p> 或 <h2> 看不出理想效果，是因为浏览器自带默认样式（比如 p 有上下 margin、h1 行高松散），不覆盖就等于没控制。

text-align 控制水平对齐但仅对块容器内联内容生效

它不是让整个 <p> 居中，而是让这个 p 里面的文字、图片等内联内容水平居中。常见错误是给行内元素（如 <span>）设 text-align，无效——因为 text-align 必须作用在**块级父容器**上。

• 正确用法：<p style="text-align: center">这段文字会居中</p>
• text-align: justify 会让英文单词间距拉伸以填满整行，中文效果差，慎用
• align 属性（如 <p align="center">）已废弃多年，用它会触发 quirks 模式，CSS 解析可能异常

line-height 和 letter-spacing 配比影响可读性

这两个值不是越大越好，得匹配字体大小和语言习惯。中文正文常见组合是：font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。

Article To Html

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

下载

• line-height 推荐用无单位数值（如 1.6），避免固定像素值（如 24px）在缩放时断裂
• letter-spacing 用 em 比 px 更稳——0.03em 在 14px 字体下约 0.42px，在 20px 下约 0.6px，比例一致
• 中英文混排时，letter-spacing 对西文影响更明显，可加 text-rendering: optimizeLegibility 微调

writing-mode: vertical-rl 是唯一靠谱的竖排方案

别再用 transform: rotate(90deg) 或手动换行模拟竖排——那样文本不可选、无法复制、SEO 失效，响应式一塌糊涂。

立即学习“前端免费学习笔记（深入）”；

• 竖排必须配 text-orientation: upright，否则英文字母会变成堆叠的单列（如 “HTML” 显示为 H↵T↵M↵L）
• 容器必须设固定 height，否则竖排内容会让父容器无限拉长
• text-align: center 在竖排中表示**垂直居中**，text-align: right 表示**顶部对齐**——方向逻辑和横排相反，容易踩坑

真正难的不是写对某一条 CSS，而是理解每个属性的生效范围、继承关系和浏览器默认行为。比如 letter-spacing 会继承给子元素，line-height 的无单位值依赖当前 font-size，而 writing-mode 会改变整个盒模型的方向逻辑——这些细节不厘清，样式就会反复失效。