用p标签包裹段落并设置margin、text-indent、line-height三行css即可解决多数排版问题；段间距缺失源于全局重置清除了p默认margin，需显式设p{margin:1em 0}；段内挤贴是line-height过小所致，中文建议1.5~1.6；禁在p内嵌块级元素，否则浏览器自动修复破坏语义与结构。
直接用 p 标签包裹语义完整的段落，再配 margin、text-indent 和 line-height 三行 CSS 就能解决绝大多数排版问题，不需要 JS、不依赖框架、所有浏览器都认。
为什么段落之间没空隙或挤成一团
常见现象是两段文字紧贴着，或者段内文字行距过小——这两个问题根源完全不同，但常被一起处理错。
- 段落之间没空隙 → 大概率是全局 CSS 重置（如
* { margin: 0; }）干掉了p默认的margin，直接补上p { margin: 1em 0; }即可 - 段内文字挤在一起 → 是
line-height太小，不是margin的事；中文建议设为line-height: 1.5;～1.6; - 用了
display: inline-block包p却没设vertical-align→ 行框底部对齐异常，视觉上“粘连” - 父容器写了
font-size: 0（比如为了清除 inline-block 间隙）→ 所有em单位失效，margin和text-indent全部归零
怎么统一段落上下间距和首行缩进
浏览器默认给 p 加的是约 1em 的 margin-top 和 margin-bottom，但不同 UA 可能有微小差异。最稳做法是显式覆盖：
- 全局统一：
p { margin: 1em 0; }—— 推荐写在 CSS 开头 - 去掉首段顶空：
.article p:first-child { margin-top: 0; } - 去掉末段底空：
.article p:last-child { margin-bottom: 0; } - 首行缩进两个汉字宽：
p { text-indent: 2em; }（别用32px，它在高 DPI 或系统缩放下会失准） - 绝对不要只设
margin-top：相邻段落的margin会合并，只设一个方向会导致空白忽大忽小
哪些地方不能往 p 里面塞
HTML 规范明确限制 p 的内容模型，只允许行内元素。一旦塞入块级元素，浏览器会自动“修复”，结果不可控且语义全毁：
- 禁止：
<p></p> <div>xxx</div>→ 实际解析为<p></p> <div>xxx</div> <p></p>，多出空段落 - 禁止：
<p></p> <p>嵌套段落</p>→ 同样被截断，结构断裂 - 允许的只有：
<strong></strong>、<em></em>、<code>、<img>等行内级内容 - 要包多段？用
<div class="section"> 或语义化标签如 <code><section></section>，而不是反向嵌套text-align: justify和text-indent能不能一起用可以，但要小心：两者合用时，
text-indent仍生效，但部分浏览器（尤其是旧版 Safari）在两端对齐下可能让首行缩进看起来偏移或不稳。- 如果设计稿强要求两端对齐 + 首行缩进，建议加测试：
p { text-align: justify; text-indent: 2em; } - 更稳妥的做法是放弃
justify，用左对齐 + 合理line-height和margin，可读性反而更好 - 移动端尤其慎用
justify：小屏幕字数少，容易出现过大词间距，影响阅读节奏
真正难的不是写对这三行 CSS，而是判断哪段话该独立成
p、哪处换行只是视觉需要、哪个缩进在高缩放下还站得住脚——这些细节堆起来，才是用户眼里“顺不顺眼”的全部来源。 - 如果设计稿强要求两端对齐 + 首行缩进，建议加测试：
