Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

text-indent仅作用于块级元素，对span等内联元素无效；常见失效原因是元素非块级上下文，需设display:block或包裹块级标签；推荐用2em单位实现响应式首行缩进。

text-indent 只作用于块级元素（如 <p></p>、<div>、<code><h1></h1>），对 <span></span> 或内联元素无效，直接加了也没反应。

为什么 text-indent 加了没效果？

最常见原因是目标元素不是块级上下文。比如给一个默认 display: inline 的 <span></span> 设置 text-indent: 2em，浏览器会忽略它。

• 检查元素实际渲染的 display 值：用开发者工具看 computed styles 里的 display
• 若需缩进内联内容，要么把它包进 <p></p> 或 <div>，要么显式设 <code>display: block 或 display: inline-block
• text-indent 不继承，但子元素若也是块级且未重置，会继承父级缩进值（有时造成意外叠加）

text-indent 的单位选 em 还是 rem？

em 是相对当前元素字体大小的倍数，适合传统中文段落首行两字符缩进；rem 相对根元素字体大小，更适合响应式或全局统一控制。

• 中文排版惯例是「首行缩进两个汉字宽度」，写成 text-indent: 2em 最直观——只要 font-size 是 16px，2em 就约等于 32px，接近两个标准汉字宽度
• 如果页面根字体动态变化（如通过 JS 切换 html 的 font-size），用 2rem 更可控
• 避免用像素值（如 32px），它不随字体缩放，无障碍浏览或系统放大时容易错位

负值 text-indent 和悬挂缩进怎么搞？

负值合法，常用于实现「悬挂缩进」（即第一行左移，其余行正常）或文本外挂图标对齐。

• 实现悬挂缩进：设 text-indent: -1em + padding-left: 1em，让内容区整体右移，文字第一行就“悬出来”
• 注意：负缩进可能把文字缩到容器左侧外，需配合 overflow: hidden 或确保父容器有足够左内边距
• 不要和 direction: rtl 混用，负值行为在从右向左布局中逻辑会反转，容易误判

真正容易被忽略的是：当元素设置了 border 或 background 时，text-indent 缩进的是文字内容盒（content box），不包含 padding 区域——如果你期望文字离边框也有距离，得额外加 padding-left。