html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

text-indent仅缩进首行文本起点，不影响段落盒子位置；margin-left则整体右推整个元素。前者用于首行缩进（如2em），后者适用于整段偏移（如侧边栏），混用会导致justify失效、响应式溢出等问题。

text-indent 和 margin-left 都能缩进，但作用对象完全不同

text-indent 只缩进段落第一行的文本起点，不影响段落盒子本身的位置；margin-left 是把整个 <p></p> 元素往右推，导致整段文字左边界偏移。

常见错误现象：margin-left: 2em 后发现 text-align: justify 失效、复制文本时多出空白、响应式下小屏缩进溢出容器。这是因为 margin-left 改变了块级盒的定位基准，破坏了浏览器对齐算法的预期。

实操建议：

• 需要“首行两个汉字宽”的视觉效果 → 用 text-indent: 2em
• 需要“整段内容向右让出一块区域”（如侧边栏说明、引用块）→ 用 margin-left 或 padding-left，但要配合语义标签如 <blockquote></blockquote> 或 class 显式标注意图
• 若父容器是 display: flex 或 display: grid，<p></p> 可能被压成 inline 级别 → text-indent 失效，必须加 display: block

段落间距该用 margin 还是 padding？

段落之间空隙的本质是“段与段的分隔”，属于相邻块级元素的关系，所以必须用 margin —— 浏览器默认给 <p></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></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></p> 上直接写内联 style，统一收口到 CSS 文件或 <style></style> 块里
• 若某段不该缩进（如列表项开头、代码说明），用 class 区分：<p class="no-indent"></p>，再写 .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

真正难的不是写出那几行 CSS，而是看到缩进不对、间距异常时，能立刻判断是 text-indent 失效、margin 合并、还是盒模型被 box-sizing 或父容器 display 方式悄悄改写了。这些细节在 Elements 面板里一眼可见，但得先知道盯哪几行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！