直接用标签无法实现精美排版，因其默认样式（如松散line-height、不一致margin、无缩进）未优化可读性；必须用css属性（如line-height: 1.6、text-indent: 2em、writing-mode等）覆盖默认值并协同语义标签控制。
直接用 <p></p> 标签不能实现“精美排版”，真正起作用的是 CSS 属性配合语义标签的协同控制。
为什么 <p></p> 写出来没效果
浏览器对 <p></p> 有默认样式（比如上下 margin、line-height 松散），但这些值不是为可读性优化过的。不覆盖它们，就等于把排版权交给了浏览器的随机偏好。
-
line-height默认常是 1.2 左右，中文阅读容易累眼；建议设为1.6～1.8（无单位数值） -
margin默认值在不同浏览器中不一致，重置后（如* { margin: 0; }）会彻底消失，段落贴在一起 -
text-align默认是left，但中文长文更适合justify或保持左对齐+首行缩进 - 别用过时的
align属性（如<p align="center"></p>），它已废弃，可能触发怪异模式
text-indent 和 margin 怎么分工
中文段落首行缩进必须用 text-indent，不是靠空格或多个 ；而段间距靠 margin 控制，两者不能混用。
-
text-indent: 2em是标准做法，em单位随字体缩放，比px更稳 - 避免给
<p></p>同时设text-indent和padding-left，后者会破坏语义缩进逻辑 - 若用
margin-bottom: 1.5em控制段距，记得在移动端用@media收窄到1em，否则小屏上空隙过大 - 不要在
<p></p>里嵌套<div> 或另一个 <code><p></p>，HTML 结构会失效，CSS 也难精准命中超长文本、中英文混排、竖排怎么不出错
这些场景下，仅靠标签语义远远不够，必须靠
white-space、overflow-wrap、writing-mode等属性组合干预渲染行为。- 用户提交含换行的文本（如评论），用
white-space: pre-wrap—— 它既保留\n，又允许自动折行 - 表格里长 URL 不折行？检查是否被框架加了
white-space: nowrap，修复只需td { white-space: normal; overflow-wrap: break-word; } - 中文竖排必须用
writing-mode: vertical-rl+text-orientation: upright，否则英文字母会堆成一列 -
letter-spacing: 0.05em适合正文，标题可放宽到0.1em，但混排时西文更敏感，慎超0.08em
最常被跳过的其实是继承链：比如父容器设了
letter-spacing，子元素没重置，结果<strong></strong>里的字距也被拉开了。排版不是写完就完，得顺着 DOM 一层层看它到底听谁的。 - 用户提交含换行的文本（如评论），用
