Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
直接修改p的margin和text-indent可解决90%段落排版问题：统一设p{margin:1em 0;text-indent:2em}，首末段用:first-child/:last-child去空，避免嵌套块级元素。
直接改 p 的 margin 和 text-indent 就能解决 90% 的段落排版问题，不需要动结构、不依赖 JS、兼容所有浏览器。
怎么快速统一段落上下间距
浏览器给 p 默认加了约 1em 上下外边距，但不同 UA 样式可能有微小差异，导致段距忽大忽小。最稳的做法是显式重置：
- 全局统一：
p { margin: 1em 0; }—— 推荐写在 CSS 开头，覆盖所有默认行为 - 首段顶空去掉：
.article p:first-child { margin-top: 0; } - 末段底空去掉：
.article p:last-child { margin-bottom: 0; } - 别只设
margin-top：相邻段落会叠加出双倍空白，必须同时控制margin-top和margin-bottom - 用
em或rem，不用px：比如margin: 1.2rem 0，字体缩放时间距自动适配
中文首行缩进为什么不能用 32px
text-indent: 2em 是中文排版的黄金值，它等于当前字号下两个汉字的宽度；而 32px 是固定像素，在高 DPI 屏幕、系统字体放大（如 Windows 125% 缩放）、或用户开启“大字体模式”时，缩进会明显失准。
- 正确写法：
p { text-indent: 2em; } - 如果必须用像素（比如设计稿强约束），至少配套写
font-size：p { font-size: 16px; text-indent: 32px; } -
text-indent只影响首行，安全；别用padding-left模拟，它会让整段左移，破坏对齐基准 - 注意：
text-align: justify会干扰text-indent效果，两者慎合用
为什么段落粘连或挤成一团
常见现象是两段文字紧贴着没空隙，或段内文字行距过小看不清——这两者根本不是同一个问题，但新手常混为一谈。
- 段落之间没空隙 → 检查
margin是否被清零或覆盖（比如 CSS Reset 里写了p { margin: 0; }） - 段内文字挤在一起 → 是
line-height太小，不是margin的事；中文建议设为1.5～1.6，例如：p { line-height: 1.5; } - 用了
display: inline-block包p却没设vertical-align→ 行框底部对齐异常，造成视觉“粘连” - 父容器设了
font-size: 0（常见于清除 inline-block 间隙技巧）→ 子元素em单位失效，margin和text-indent全部归零
哪些地方绝对不能往 p 里面塞
HTML 规范禁止在 p 内嵌套块级元素，浏览器会自动“修复”结构，结果不可控。
- 禁止：
<p></p> <div>xxx</div>→ 实际解析为<p></p> <div>xxx</div> <p></p>，多出空段落 - 禁止：
<p></p> <p>嵌套段落</p>→ 同样被截断，语义全毁 - 允许的只有行内容器：
<strong></strong>、<em></em>、<a></a>、<code>、<span></span> - 要包多段？用
<div class="section"> 或语义化标签如 <code><article></article>、<section></section>套住一组p - 地址、作者、版权信息这类非自然段落，该用
<address></address>或<footer></footer>，别硬塞进p
真正难调的从来不是单个 p，而是当 p 出现在 flex 容器、grid 项、或被 transform 干扰后，margin 塌陷或失效——这时候得切到盒模型视角，而不是继续调 text-indent。
