summary 的 text-indent 无效是因为它是替换元素，不遵循块级文本流；可靠方案是用 padding-left、flex 布局或 transform 替代。
details 标签里的 summary 默认不支持 text-indent —— 直接写 summary { text-indent: 20px; } 大概率无效，不是你代码写错了，是浏览器渲染机制限制。
为什么 summary 的 text-indent 不生效？
summary 是一个替换元素（replaced element），在多数浏览器中被当作类似 button 的内联级可点击容器处理，其内部文本不走标准的块级文本流。CSS 规范里明确指出：text-indent 对非块级盒模型（如 inline、inline-flex、inline-grid 或替换元素）无效。
Chrome 和 Safari 会把 summary 渲染为 display: list-item 或 display: inline-flex，而 Firefox 更倾向 display: block 但加了 UA 样式重置。这意味着：
-
text-indent在 Firefox 下偶尔“看似有效”，实则是 UA 样式干扰，不可靠 - 所有主流浏览器下，直接对
summary设置text-indent都不保证兼容 - 即使生效，缩进也只影响第一行，且可能破坏默认箭头图标位置
真正能用的三种对齐方案（含兼容性说明）
要让 summary 文本左对齐、居中或带缩进，得绕过 text-indent，改用以下稳定方式：
-
方案一：用
padding-left模拟缩进 —— 最简单可靠
适用于所有浏览器，不影响图标布局，只要给summary加display: block即可生效：summary { display: block; padding-left: 20px; } -
方案二：用
margin-left+display: flex控制图标与文字间距
适合需要精确控制箭头和文字间隙的场景：summary { display: flex; align-items: center; }<br>summary::marker { margin-right: 8px; }<br>summary span { margin-left: 20px; }再把文字包在<span>里即可 -
方案三：用
transform: translateX()微调位置
仅用于像素级偏移，不推荐做常规缩进，但对齐图标边缘很准：summary { display: block; }<br>summary::before { content: ""; display: inline-block; width: 20px; }或更稳妥地：summary > *:first-child { transform: translateX(20px); }
details + summary 的常见布局陷阱
实际开发中容易踩坑的地方集中在三点：
立即学习“前端免费学习笔记（深入）”；
-
summary默认有outline和cursor: pointer，加padding后点击热区变大，但若同时设border或background，需注意是否遮挡默认箭头 - Firefox 会把
summary的箭头画在内容区左侧，Chrome/Safari 则画在padding-left区域外——所以统一用padding-left比margin-left更安全 - 不要用
text-indent+white-space: nowrap强行“隐藏缩进”，这会导致文本溢出或换行异常，且跟details的折叠逻辑冲突
summary 的对齐本质是盒模型控制问题，不是文本格式问题。真正要改的是它的显示类型和内边距，而不是试图用 text-indent 去“缩进”一个不按文本流渲染的元素。 
