button 中 text-indent 失效是因为其为替换元素，不生成标准块级盒；正确做法是用 em 单位的 padding-left 实现首行缩进，兼顾可访问性、响应式与跨浏览器一致性。
button 里用 text-indent 会失效，因为 button 默认不是块级上下文
直接给 <button></button> 加 text-indent: 2em 基本没反应——这不是你写错了，是浏览器根本不按块级元素处理按钮内的文本流。button 是替换元素（replaced element），其内部文本渲染不生成标准的块级盒（block box），text-indent 对它无效。
常见错误现象：<button style="text-indent: 2em;">提交订单</button> 页面上完全看不出缩进，开发者工具里也显示该样式被计算但未生效。
- 别试图靠
display: block强行修复：加了之后按钮会塌陷、换行、失去默认居中对齐，且点击热区异常 - 更糟的是，某些浏览器（如旧版 Safari）对
button内text-indent的支持干脆为 0，连 fallback 都没有 - 如果按钮含图标或复杂 HTML（如
<span>文字</span>），text-indent更不可控，可能只缩进部分子节点
button 文字首行缩进的正确做法：用 padding-left 替代
padding-left 是唯一稳定、语义合理、跨浏览器一致的方案。它不依赖文本流模型，而是直接调整按钮内容区域的左内边距，视觉效果等同于“首行缩进”，且对所有按钮类型（<button></button>、<input type="submit">）都有效。
示例：<button style="padding-left: 2em;">确认操作</button> —— 这会把整个按钮文字整体右移，第一行和后续行保持对齐，符合中文排版预期。
- 单位优先用
em：比如padding-left: 2em，这样缩进随按钮字体大小自适应，响应式场景下不会错位 - 避免用
px：比如padding-left: 32px，用户放大系统字体或开启辅助功能时，缩进会僵硬不变 - 若按钮有图标，需同步调整图标位置（如用
margin-left或 Flex 布局控制间距），否则图标和文字之间会出现意外空隙
为什么不能用 或全角空格模拟缩进
在 <button> 确认操作</button> 开头塞两个全角空格，看似简单，但实际埋了三颗雷：
- 屏幕阅读器会读出这些空格，变成“空格 空格 确认操作”，影响无障碍体验
- 复制按钮文字时，空格会被一并复制，下游系统（如日志、表单提交）可能误判为脏数据
- 按钮宽度计算会包含空格字符宽度，不同字体下空格渲染宽度不一致，导致按钮尺寸抖动，Flex/Grid 布局容易错位
更隐蔽的问题：某些富文本编辑器或 CMS 后台会自动过滤连续空白字符，上线后缩进直接消失。
特殊情况：button 内嵌 HTML 时的缩进控制
当按钮内容不是纯文本，而是类似 <button><i class="icon"></i>下载文件</button> 这种结构时，padding-left 依然有效，但要注意：
- 如果图标用了
position: absolute，需确保其 left 值不覆盖文字缩进区域，否则视觉上像没缩进 - 想让“下载文件”四个字首行缩进，而图标不动？不能靠
text-indent，得用display: inline-flex+margin-left控制文字容器偏移 - 微信 X5 内核（iOS 微信内置浏览器）对
button内padding-left渲染偶有延迟，可加transform: translateZ(0)触发硬件加速
真正麻烦的不是怎么缩进，而是意识到 button 从来就不是 text-indent 的适用对象——它要的是布局偏移，不是文本流控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
