blockquote 默认不靠缩进区分，text-indent 仅作用于首行故无效；应使用 padding-left 配合 border-left 实现稳定缩进与视觉锚点，嵌套引用通过层级选择器逐级加深，兼顾语义与响应式。
blockquote 默认不靠缩进实现视觉区分，直接加 text-indent 会失效——它只对首行生效，而引用块通常多行、带段落，首行缩进根本看不出“引用感”。
为什么 text-indent 对 blockquote 没用
因为 blockquote 是块级元素，默认 display: block，text-indent 只影响其内部**第一行文本的首字符**。如果引用内容换行了，后续行不会缩进，视觉上就是“左边齐、右边乱”，反而更难读。
- 常见错误：写
blockquote { text-indent: 2em; }，结果只有第一行动了 - 真正起作用的是
padding-left或margin-left，它们推的是整个块 - 若需保留浏览器默认样式（比如引号），建议用
padding-left，避免破坏边框或背景定位
用 padding-left 实现稳定缩进
这是最可靠、语义清晰的做法。缩进量建议设为相对单位（如 em），适配不同字号；同时配合 border-left 强化引用边界感。
blockquote {
padding-left: 1.5em;
border-left: 3px solid #ccc;
margin: 1em 0;
}
-
padding-left推动所有内容（含子段落、列表），缩进一致 -
border-left配合缩进能立刻建立视觉锚点，比纯空白更易识别 - 避免用
margin-left：它会让整个块脱离文档流左侧基准，可能影响响应式断行或父容器布局
处理嵌套引用和多级缩进
当引用里再套引用（比如转述某人转述另一人），需要逐层加深缩进。不能靠 class 堆叠，要用 CSS 选择器层级匹配。
立即学习“前端免费学习笔记（深入）”；
blockquote blockquote {
padding-left: 2em;
border-left-color: #999;
}
blockquote blockquote blockquote {
padding-left: 2.5em;
border-left-color: #666;
}
- 用嵌套选择器比写
.blockquote-level-2更语义化，也免去 HTML 加 class 的麻烦 - 每层增加
0.5em左右即可，太多会挤压可读宽度 - 注意：某些 CMS（如 WordPress）会自动把连续换行转成
<p>，确保这些p在blockquote内部仍继承缩进——只需不重置padding或margin
真正难的不是加缩进，而是让缩进在不同字体、不同屏幕宽度下都保持呼吸感。留白太小像挤在一起，太大又像漏了一段文字。调的时候盯着真实内容看两眼——尤其是首行和第二行的对齐关系，比数值更重要。
