blockquote缩进失效的直接原因是浏览器默认样式被重置或覆盖，导致margin设为0，或父容器overflow:hidden裁剪留白；需用开发者工具Computed面板查最终生效值，而非仅看Styles。
blockquote 标签不缩进，CSS margin-left 失效
直接原因：浏览器默认样式被重置或覆盖，blockquote 的 margin 被设为 0，或者父容器设置了 overflow: hidden / text-overflow 类属性，裁掉了左侧留白。
常见错误现象是写好 CSS：blockquote { margin-left: 2em; }，但页面完全没反应——不是代码没加载，而是它被更高优先级的规则干掉了。
- 检查是否引入了
normalize.css或reset.css，它们常把blockquote的margin设为0 - 用浏览器开发者工具「Computed」面板看最终生效的
margin-left值，别只盯「Styles」里你自己写的那条 - 如果用了 CSS-in-JS 或 scoped style（如 Vue 单文件组件），确认选择器作用域没导致
blockquote规则未命中
HTML 中嵌套 blockquote 后文本换行异常
本质是 HTML 解析规则：blockquote 是块级元素，但它的内部若只放纯文本，浏览器会合并连续空白符（包括换行和缩进），导致你写在 HTML 源码里的回车全消失。
使用场景典型如引用多段落内容，想保留人工换行却渲染成一行。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖源码换行，改用
<p></p>包裹每段，blockquote内允许合法嵌套p - 若必须用纯文本+换行，加
white-space: pre-line到blockquote或其子容器 - 避免对
blockquote设置display: inline或flex，这会破坏其默认块级流行为，引发意外交互问题
IE11 下 blockquote 缩进错位或消失
IE11 对 em 单位的继承计算有偏差，尤其当父元素 font-size 动态变化（比如通过 rem 或 JS 修改）时，blockquote 的 margin-left: 2em 可能按错误基准换算，变成几乎为零。
性能影响不大，但兼容性一票否决。
- 改用
rem或固定像素值，例如margin-left: 1.5rem（前提是根字号稳定） - 给
blockquote显式设置font-size: 1em，切断继承链干扰 - 不用
ch、ex等冷门单位，IE11 支持弱且渲染不一致
Vue/React 中动态插入 blockquote 后样式丢失
根本不是框架问题，而是 DOM 插入时机与样式表加载顺序错配：JS 创建 blockquote 元素并 append 进去时，CSS 文件可能尚未解析完成，导致初始无样式；后续即使 CSS 加载完，也不会自动回溯应用。
容易被忽略的是 SSR 场景——服务端吐出的 blockquote 有样式，客户端 hydrate 后反而没了，其实是 JS 重新渲染覆盖了原生 HTML 节点。
- 确保 CSS 在 JS 执行前已
<link rel="stylesheet">加载完毕，别用loadCSS异步注入关键样式 - 在 Vue 中用
v-html插入含blockquote的字符串时，确认该字符串不含内联style覆盖外部规则 - React 中避免直接
dangerouslySetInnerHTML混入未清洗的 HTML，某些 sanitizer 库会剥离blockquote标签
真正麻烦的从来不是怎么加缩进，而是缩进在哪儿失效、为什么失效、以及失效时你根本没意识到它已经失效了。
