blockquote的缩进来自margin而非padding或text-indent；正确做法是重置或调整margin，如blockquote { margin: 0; }或margin-inline-start适配rtl，伪元素需配合position: relative定位。
blockquote 缩进来自 margin，不是 padding 或 text-indent
浏览器给 blockquote 设的默认缩进，是左右 margin（Chrome/Firefox/Safari 通常为 1em 或约 40px），不是 padding，也不是 text-indent。你调 padding-left 没反应，是因为它压根没被设过；用 text-indent 只缩首行，多段引用会错位。
常见误操作：blockquote { padding-left: 2rem; } —— 无效，纯白忙活。
- 直接改
padding：无效果，样式不生效 - 只设
margin-left：RTL 页面（如阿拉伯语）下右侧不对齐 - 用
display: inline-block或position: absolute绕开 margin：破坏文档流，引发新布局问题
重置或微调缩进必须操作 margin
最干净的做法是覆盖默认 margin。要不要保留语义、要不要适配 RTL、要不要响应式，决定了你写法的粒度。
- 完全去掉缩进：
blockquote { margin: 0; } - 微调缩进（推荐）：
blockquote { margin: 0 0.5em; }—— 同时控制左右，避免 RTL 错位 - 仅左缩进但需兼容 RTL：
blockquote { margin-inline-start: 0.75em; margin-inline-end: 0; }（现代浏览器支持，IE 不支持） - 嵌套引用需逐层缩进：
blockquote blockquote { margin-left: 1.5em; margin-right: 1.5em; }
注意：margin 值别用 rem，除非你确定根字体不会动态变化（比如夜间模式切换 font-size）；em 更稳妥，随当前字号缩放。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
想加引号或图标？先清 margin 再用伪元素定位
blockquote 默认没设 position，所以 ::before/::after 无法精确定位。要加引号图标，得先重置 margin，再设 position: relative。
- 错误写法：
blockquote::before { content: "“"; left: 0; }——left无效，因为没position - 正确顺序：
blockquote { margin: 0; position: relative; }，再写伪元素 - 图标建议用
font-icon或 SVG，别用图片——避免加载失败或尺寸失真
如果父容器用了 box-sizing: border-box，不影响 margin 行为，无需额外处理。
缩进控制和语义别混着来
缩进只是视觉表现，blockquote 的核心价值是语义：表示内容摘自外部源。如果你只是想让一段文字“看起来缩进”，但没有引用含义，就该用 p + class="indent"，而不是滥用 blockquote。
- 纯样式缩进：
.indent { text-indent: 2em; }（首行缩进）或margin-left: 1em（整段偏移，慎用） - 引用+缩进：
<blockquote cite="https://example.com">…</blockquote>，再配 CSS 控制 margin - 诗歌/代码类缩进：用
<pre class="brush:php;toolbar:false;"><code></code>，别硬套 <code>blockquote</code>，否则 line-height 和 whitespace 处理会出问题</pre>
真正容易被忽略的是：很多人调了半天 padding 和 text-indent，却忘了打开浏览器开发者工具，直接看 computed 样式里 margin-left 和 margin-right 的实际值——那才是真相所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
