直接用标签配合基础CSS即可完成多数文字排版，语义化分段、合理设置line-height和margin、中文首行缩进及左对齐是核心要点，克制干预默认样式是关键原则。
直接用 <p></p> 标签配合基础 CSS 就能完成绝大多数文字排版需求，不需要额外框架或 JavaScript。
用 <p></p> 做语义化段落分组
每个 <p></p> 应包裹一个完整意思的文本块，不是为了换行而写。连续多个 <p></p> 会自动产生垂直间距，这是浏览器默认样式的一部分。
- 错误写法：
<p>第一句</p> <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>第二句</p>（空<p></p>无语义，且破坏可访问性） - 正确写法：每段内容独立、有逻辑边界，比如“背景介绍”“核心结论”“后续建议”各为一段
- 屏幕阅读器依赖
<p></p>结构理解内容层次，乱用会影响无障碍体验
line-height 控制段内呼吸感
行高不是装饰，它直接影响眼睛追踪效率。设为无单位数值（如 1.6）比固定像素更可靠，因为会随 font-size 自动缩放。
- 小字号（
14px）建议line-height: 1.5～1.7 - 正文常用
16px字体时，line-height: 1.6是较稳妥的选择（即25.6px行高） - 避免用
line-height: 24px这类固定值——在响应式字体（如clamp()）下容易导致行距塌陷或撑开
margin 管理段间节奏
段落之间靠 margin-top 或 margin-bottom 分隔，但别两个都设。浏览器默认只给 <p></p> 加 margin-bottom，沿用这个习惯更安全。
- 统一用
margin-bottom: 1.2em（相对单位）比16px更适应不同字号 - 如果父容器已有 padding，再加 margin 可能造成意外空白，先检查 computed styles
- 首段顶部、末段底部通常不需要额外 margin，除非设计明确要求留白
中文首行缩进与对齐方式
中文排版习惯首行缩进两个字符，用 text-indent 实现，但注意它不适用于所有场景。
- 设置
text-indent: 2em即可，em会随当前字体大小变化，比32px更鲁棒 - 标题、引用、代码段、列表项等非正文段落一般不缩进，需单独重置：
text-indent: 0 - 左对齐（
text-align: left）是中文长文最佳选择；居中仅适合短标题，正文居中会显著降低阅读速度
真正难的不是写对这几个属性，而是克制——别一上来就套 reset.css 或全局覆盖 margin，先让浏览器默认行为工作，再按需微调。很多排版问题，其实源于过早干预了自然流。
