text-indent控制首行缩进、margin控制段间距是唯一稳定可维护的组合；因padding-left或margin-left会导致整段偏移，破坏justify对齐、flex/grid布局及响应式表现。
直接用 text-indent 控制首行缩进、margin 控制上下间距，两者互不干扰——这是唯一稳定、可维护的组合方式。
为什么不能用 padding-left 或 margin-left 模拟首行缩进
它们会让整段左移，不是“首行缩进”，而是“整段偏移”。后果包括：
• text-align: justify 失效，两端对齐完全错乱
• 在 display: flex 或 display: grid 容器里，margin-left 可能被忽略或触发意外 BFC
• 响应式断点下，固定像素值（如 32px）在小屏会溢出容器
• 若段落内含 <img> 或 <span> 等内联元素，视觉错位更明显
text-indent 和 margin 的单位怎么选才不出错
单位选错是缩进/间距失效的最常见原因：
• text-indent: 2em 是中文排版黄金标准：1em ≈ 当前字号宽度，缩进始终≈两个汉字宽，随用户缩放、系统字体变化自适应
• margin: 0.8em 0 同理：用 em 而非 px，避免高 DPI 屏幕下段距过窄或过宽
• 别用 %：它基于父容器宽度，窄屏时缩进可能只剩几像素
• 少用 rem：若项目中动态改过 html 根字体（如夜间模式），缩进会跳变
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
首段和末段的 margin / text-indent 需要单独重置
浏览器默认给每个 <p> 加 margin-top 和 margin-bottom，但首段顶边距、末段底边距通常不该存在：
• 首段缩进常需取消：p:first-of-type { text-indent: 0; margin-top: 0; }
• 末段底边距易造成页面底部多余空白：p:last-of-type { margin-bottom: 0; }
• 若段落嵌套在 flex 容器中，text-indent 可能失效——此时加 display: block 强制块级上下文，或改用 padding-left: 2em（仅当语义允许）
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是单个属性，而是三者叠加时的视觉反馈：text-indent 定位首行起点，margin 推动段落位置，line-height 控制行内松紧——任何一个值没对齐，用户一眼就能看出“这段文字不对劲”。
