text-indent 是实现段落首行缩进最直接可靠的方式，仅作用于块级元素第一行，支持继承与响应式单位；误用于内联元素、flex 子项或负值未配 overflow:hidden 会导致失效。

text-indent 是实现段落首行缩进最直接、最可靠的方式，它只作用于块级元素（如 p、div、blockquote）的第一行，不影响后续行或内联元素。

为什么 text-indent 比用 margin 或 padding 更合适

用 margin-left 或 padding-left 会让整块内容左移，破坏段落对齐；而 text-indent 仅偏移第一行的文本起始位置，其余行保持原左边界。它还天然支持继承和响应式单位（如 em、rem），适配不同字号更稳妥。

常见错误现象：
– 给 span 或 a 这类内联元素设 text-indent，无效（需先设 display: inline-block 或 block）
– 在 Flex 容器子项上使用，可能被主轴对齐逻辑覆盖
– 值设为负数时未配合 overflow: hidden，导致文字溢出可见区域

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

text-indent 的常用值写法与兼容性注意点

中文排版习惯是缩进两个汉字宽度，推荐用 2em（相对当前字体大小），而非固定像素值（如 32px），避免字号变化后缩进失当。

• text-indent: 2em：最通用，随 font-size 缩放
• text-indent: -1em：可用于悬挂缩进（需搭配 padding-left: 1em 平衡整体位置）
• text-indent: 10%：按容器宽度百分比计算，适合响应式布局但易受父容器尺寸波动影响
• 不支持 vh/vmax 等视口单位作为 text-indent 值（部分旧版 Safari 会忽略）

遇到首行缩进不生效的几个典型原因

不是所有“看起来像段落”的元素都响应 text-indent：

• 元素 display 计算值不是 block、table-cell 或 list-item（例如默认 inline 的 span）
• 父元素设置了 white-space: nowrap 或 pre 类行为，抑制了换行逻辑
• CSS 优先级被更高权重规则覆盖（比如某框架重置了所有 p 的 text-indent 为 0）
• 使用了 direction: rtl 且未同步调整 text-indent 方向语义（此时 text-indent 实际向右缩进）

真正容易被忽略的是：当段落内容以  、

<br>

或空标签开头时，浏览器可能将这些“不可见字符”视为首行内容，导致缩进视觉错位——建议清理 HTML 内容前后空白，或用 ::first-line 配合 text-indent 做双重保障。

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