p标签段落间距由浏览器默认margin控制，非HTML本身定义；需用CSS重置margin、text-indent和line-height精准调控，避免外边距合并与语义错误。
直接控制 p 的 margin、text-indent 和 line-height 就能解决 90% 的“不整齐”问题，不用改结构、不依赖 JS、所有浏览器都认。
为什么段落之间挤在一起或空太多
浏览器默认给 p 加了约 1em 上下外边距，但不同 UA 样式有微小差异，叠加后容易忽大忽小。更麻烦的是，CSS Reset 或某些 UI 框架可能清掉了它，导致段落“粘连”。
- 统一重置：
p { margin: 1.2rem 0; }—— 推荐写在 CSS 开头，用rem而非px，适配缩放 - 首段顶空去掉：
.article p:first-child { margin-top: 0; } - 末段底空去掉：
.article p:last-child { margin-bottom: 0; } - 别只设
margin-top：相邻p的上下 margin 会合并，必须同时控制上下
中文段落首行缩进怎么才靠谱
用空格、 或 padding-left 模拟缩进，看着像，但语义错、不可缩放、屏幕阅读器误读——而且高 DPI 屏或系统放大时直接失准。
- 正确写法：
p { text-indent: 2em; }—— “2em” 等于当前字号下两个汉字宽度，是中文排版黄金值 - 禁用
text-align: justify和text-indent同时作用：前者会干扰后者效果，尤其在窄容器里 - 别用
padding-left替代：text-indent只动首行，padding-left会整体左移，破坏对齐基准
文字挤成一团 or 行距松垮，到底该调哪个属性
新手常把“段落没空隙”和“字挨太近”混为一谈，其实它们是两个独立问题：一个是块级间距（margin），一个是行内垂直空间（line-height）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 段内文字看不清、行距过小 → 改
line-height，中文建议1.5～1.6（无单位数值，如p { line-height: 1.55; }） - 两段文字紧贴着没空 → 检查
margin是否被覆盖，特别是父容器设了font-size: 0（常见于 inline-block 清间隙技巧），会导致em单位全部失效 -
display: inline-block包裹p却没设vertical-align→ 行框底部对齐异常，视觉上也像“粘连”
竖排、中英文混排、标题字距这些“精美”需求怎么不翻车
真正影响整齐度的，往往不是标签本身，而是那些被忽略的继承链和方向逻辑。比如 writing-mode: vertical-rl 后，text-align: center 表示垂直居中，不是水平居中；又比如 letter-spacing 在中英文混排时对西文影响更大，但设成 0.1em 对中文可能就过宽。
- 竖排必须配
text-orientation: upright，否则英文字母会堆成一列（H↵T↵M↵L） - 容器必须设固定
height，否则竖排内容会让父容器无限拉长 - 标题字距建议
0.1em～0.15em，正文超过0.08em就易降低可读性 -
letter-spacing会继承，<strong></strong>里再设一次可能叠加，要留意
最易被忽略的其实是 font-size: 0 和 text-align: justify 这类“顺手加的样式”，它们会悄悄破坏 em 计算和首行缩进逻辑，等上线才发现排版全乱了。
