blockquote 默认缩进效果弱，需用 css 逻辑属性（如 margin-inline-start）实现兼容 rtl 的稳定缩进；嵌套时应重置样式；语义正确性优先于视觉效果，不可用 div 替代。
blockquote 默认就是块级引用，但缩进效果不明显
浏览器对 <blockquote></blockquote> 的默认样式差异较大：Chrome 和 Firefox 会加左右外边距（margin-inline-start 和 margin-inline-end），但数值小、无内边距或背景，视觉上“缩进感”弱。单纯用标签不加 CSS，很难达到文档级缩进效果。
常见错误是只写 <blockquote>文字</blockquote> 就以为完成，结果在移动端或旧版 Safari 里几乎看不出缩进。
- 必须配合 CSS 控制
margin或padding才能稳定呈现缩进 - 避免只设
margin-left—— 不支持 RTL（从右向左）语言的页面会出错，应优先用逻辑属性：margin-inline-start - 若需兼容 IE11，得回退到
margin-left，并用@supports隔离现代写法
用 CSS 实现可控缩进的三种写法
推荐按兼容性分层处理，而不是一刀切：
- 基础缩进（所有浏览器）：
blockquote { margin-inline-start: 2em; } - 增强可读性（现代浏览器）：
blockquote {<br> margin-inline-start: 2.5em;<br> padding-inline-start: 0.8em;<br> border-inline-start: 3px solid #ccc;<br>} - 响应式缩进（适配小屏）：
@media (max-width: 768px) {<br> blockquote { margin-inline-start: 1.2em; padding-inline-start: 0.5em; }<br>}
注意：不要用 text-indent —— 它只缩进首行，对大段文字无效；也不要依赖 padding-left 而忽略方向性，否则阿拉伯语用户看到的是反向缩进。
嵌套 blockquote 时缩进会叠加，需要重置
当引用中再套引用（比如引文里还有别人说的话），浏览器默认会让第二层 <blockquote></blockquote> 在第一层基础上继续缩进，可能过深甚至触发水平滚动条。
- 用
blockquote blockquote选择器单独控制嵌套层级：blockquote blockquote { margin-inline-start: 1.5em; } - 更稳妥的做法是用自定义类区分语义：
<blockquote class="quote-reply"></blockquote>，避免样式污染 - 如果用 CSS-in-JS 或 Tailwind，别直接写
ml-8 ml-12堆叠，应在组件内部做层级判断
语义正确比视觉缩进更重要
很多人为了“看起来缩进”，把 <div> 加 class 模拟 <code><blockquote></blockquote>，这是错误的。搜索引擎和读屏软件靠标签识别内容结构，<blockquote></blockquote> 明确表示“这段文字来自外部来源”，替换为 <div> 会丢失语义。
<ul>
<li>缩进是表现层需求，必须用 CSS 解决，不能动 HTML 结构</li>
<li>如果引用带作者信息，应配合 <code><footer></footer> 或 <cite></cite>，而不是塞进 title 属性
text-indent，别滥用 <blockquote></blockquote>
真正难的不是怎么缩进，而是判断哪段该用 <blockquote></blockquote> —— 它不是排版工具，是语义容器。缩进只是它附带的视觉提示，别本末倒置。
