text-indent仅缩进首行文本起点，不影响段落盒子位置；margin-left则整体右推整个<p>元素。前者用于首行缩进（如2em），后者适用于整段偏移（如侧边栏），混用会导致justify失效、响应式溢出等问题。
text-indent 和 margin-left 都能缩进，但作用对象完全不同
text-indent 只缩进段落第一行的文本起点，不影响段落盒子本身的位置；margin-left 是把整个 <p> 元素往右推，导致整段文字左边界偏移。
常见错误现象：margin-left: 2em 后发现 text-align: justify 失效、复制文本时多出空白、响应式下小屏缩进溢出容器。这是因为 margin-left 改变了块级盒的定位基准，破坏了浏览器对齐算法的预期。
实操建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 需要“首行两个汉字宽”的视觉效果 → 用
text-indent: 2em - 需要“整段内容向右让出一块区域”（如侧边栏说明、引用块）→ 用
margin-left或padding-left，但要配合语义标签如<blockquote>或 class 显式标注意图 - 若父容器是
display: flex或display: grid，<p>可能被压成 inline 级别 →text-indent失效，必须加display: block
段落间距该用 margin 还是 padding？
段落之间空隙的本质是“段与段的分隔”，属于相邻块级元素的关系，所以必须用 margin —— 浏览器默认给 <p> 加的上下外边距就是这个逻辑。
立即学习“前端免费学习笔记（深入）”；
用 padding 模拟段距会撑大容器高度、干扰 flex/grid 对齐、还可能和 border 叠加出意外留白。更隐蔽的问题是：padding 不参与 margin 合并（collapsing），会导致相邻段落间距不可预测。
实操建议：
- 统一控制段距：
p { margin: 1.2em 0; }（推荐无单位数值，兼容缩放） - 去掉首段顶边距：
p:first-of-type { margin-top: 0; } - 避免只设
margin-top：否则和上一个兄弟元素的margin-bottom合并，实际空隙可能比预期小 - 若父容器有
overflow: hidden或没设border，子<p>的margin-top可能“塌陷”到父容器顶部 → 加padding-top: 0.1px或改用display: flex
为什么 text-indent 推荐用 2em 而不是 32px 或 2rem？
2em 是当前元素 font-size 的两倍，用户放大字体、系统启用大号文本、甚至 zoom 到 150% 时，缩进仍稳定对应“两个汉字宽度”。而 32px 在高 DPI 屏或缩放后会显得过窄；2rem 依赖 html 根字体，一旦项目中动态切换夜间模式或 font-size，缩进会突变。
常见错误现象：设了 text-indent: 2rem 后，在 iOS Safari 中缩进过大；设 text-indent: 2% 后，窄屏下缩进不足 1 字符宽。
实操建议：
- 中文排版一律用
text-indent: 2em，不加单位换算 - 避免在
<p>上直接写内联 style，统一收口到 CSS 文件或<style>块里 - 若某段不该缩进（如列表项开头、代码说明），用 class 区分：
<p class="no-indent">，再写.no-indent { text-indent: 0; }
line-height 和 margin 混用时容易踩的坑
line-height 控制的是段落内部**行与行之间的距离**，不是段与段之间的距离。有人试图靠调高 line-height: 3 来“撑开段距”，结果是段内行距爆炸，可读性崩坏。
另一个典型误操作：同时设 margin-top: 1em 和 text-indent: 2em，发现首字位置“飘”了——其实是 margin-top 把整个段落上提，而 text-indent 仍从块左边界计算，视觉上首字没动，但段落整体上移，造成错位感。
实操建议：
- 段内节奏用
line-height: 1.6（无单位），段间节奏只动margin - 若需精细控制垂直节奏（比如图文混排），优先调整
margin-bottom，它不影响text-indent的起始参考线 - 调试时打开浏览器开发者工具，看 computed 样式里的
margin是否被合并、text-indent是否 applied、display是否为block
text-indent 失效、margin 合并、还是盒模型被 box-sizing 或父容器 display 方式悄悄改写了。这些细节在 Elements 面板里一眼可见，但得先知道盯哪几行。 
