blockquote缩进源于浏览器默认margin（非padding或text-indent），主流引擎设为1em或约40px；重置应直接覆盖margin，如margin: 0，避免误用其他属性导致rtl错位或布局异常。
blockquote 的缩进不是语义必需，而是浏览器默认加的 margin；想改样式，直接覆盖它，别绕弯子。
为什么blockquote会缩进？
Chrome、Firefox、Safari 等主流浏览器给 blockquote 设了左右 margin（通常是 1em 或约 40px），不是 padding，也不是 text-indent。这就是你看到“缩进”的真实来源。
- 写
padding-left: 20px没反应——因为缩进来自margin，不是内边距 - 加了
text-align: center后文字居中，但块区域仍偏移——说明是外边距在起作用 - 用了 CSS Reset 后缩进消失——其实是 reset 把默认
margin清掉了，不是“样式失效”
怎么安全地重置或自定义blockquote缩进？
最干净的做法是显式声明 margin，而不是依赖浏览器默认或试图“修复”它。
- 完全去掉缩进：
blockquote { margin: 0; }—— 注意必须用margin简写或同时设margin-left和margin-right，否则 RTL 页面（如阿拉伯语）可能错位 - 微调缩进宽度：
blockquote { margin: 0 1.5rem; }—— 数值比em更可控，适配响应式 - 避免只写
margin-left：单侧设置在 RTL 下会破坏布局对称性 - 别用
display: inline-block或position: relative去“模拟缩进”：这会引入新的布局上下文和继承问题
比缩进更推荐的视觉区分方式
纯缩进易被忽略、难对齐、无对比度，实际项目中建议用更明确的视觉线索：
- 加左侧竖线：
blockquote { border-left: 3px solid #ccc; padding-left: 1rem; }—— 宽度精确、语义清晰、RTL 友好 - 浅色背景：
blockquote { background-color: #f9f9f9; padding: 1rem; }—— 注意检查文本与背景的对比度是否满足 WCAG AA（至少 4.5:1） - 禁用
text-indent模拟缩进：它只缩首行，多行引用会显得头重脚轻 - 避免内联样式：
style="margin:0"能强制覆盖，但污染 HTML、无法复用、主题切换困难
cite 属性和来源显示常见误区
cite 是纯元数据属性，浏览器不渲染、不加链接、不显示文字。填了 cite="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635" 不等于用户能看到来源。
- 要让用户看见出处，必须手动加
<footer></footer>或<small></small>，例如：<footer>—— 来源：@#@#@#@#@#@#@#@#@#@0</footer> -
cite值必须是完整 URL（含协议），不能是书名、人名或相对路径片段（如"section2"） - CSS 里不能用
[cite]::before { content: attr(cite); }自动插入——attr()在伪元素中不支持动态 URL 渲染，且可访问性极差 - 如果项目用了 Shadow DOM 或 CSS-in-JS，外部样式类可能无法穿透到
<blockquote></blockquote>内部的<footer></footer>，需额外处理作用域
真正麻烦的从来不是缩进本身，而是把 cite 当成可显示字段、把 margin 当成“样式 bug”去调试——这两点踩中一个，后续所有样式调整都会偏离方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
