直接写 border-left 不腾空间，文字贴边需用 padding-left 推开；cite 仅表作品标题，作者信息应放 footer；深色模式用 @media fallback 配紫调边框；嵌套引用要重置 margin、box-sizing 和移动端适配。
为什么直接写 border-left 会让文字贴着边框？
因为 border-left 只画线，不自动腾出空间——文字仍按原位置渲染，视觉上就“撞”在边框上了。必须手动用 padding-left 把内容往右推，否则再粗的线也显得局促。
常见错误现象：
– 引用文字第一行紧贴左边框，阅读时视线被强行打断
– 多层嵌套引用时，边框重叠、间距混乱
– Firefox 下默认斜体未重置，语气突兀
-
padding-left至少设为1.2em（比1em更稳妥，适配不同字号） - 同步调
margin：上下设为1em 0，避免与前后段落粘连 - 强制重置字体样式：
font-style: normal;，覆盖 Firefox 默认斜体
blockquote 里怎么加作者信息才语义正确？
cite 标签在 HTML5 中只表示作品标题（比如《三体》），不是人名；硬塞作者名进去会误导屏幕阅读器和 SEO。真正合规的做法是用 footer 包裹作者 + 来源，并靠 CSS 控制对齐。
- 结构写法：
<blockquote> <p>…</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <footer>—— 张三，《技术札记》，2026</footer> </blockquote> -
footer加text-align: right;，别用float: right（易引发清除问题） - 作者行字号设为
0.9em、颜色#666，避免压过正文语气 - 加
margin-top: 0.5em;，防止和上文引用段距离过大或过小
深色模式下 border-left 颜色怎么安全切换？
@media (prefers-color-scheme: dark) 是标准方案，但旧版 Safari 和部分安卓 WebView 不支持，直接依赖它会导致深色下边框消失或变黑不可见。
- 先设一个通用 fallback 色，比如
border-left: 4px solid #3a86ff; - 再在媒体查询里覆盖：
@media (prefers-color-scheme: dark) { blockquote { border-color: #8338ec; } } - 别只换颜色——深色背景里浅色边框对比度可能不足，
#8338ec这类紫调比纯蓝更稳 - 如果项目需兼容 IE 或极老环境，干脆放弃媒体查询，用 JS 检测
matchMedia后动态加 class
用 border-left 做引用块时最常漏掉的细节
很多人调完边框和内边距就以为完成了，结果上线后发现移动端错位、嵌套引用塌陷、复制文本带多余空格——这些都不是 bug，是盒模型理解偏差导致的连锁反应。
-
blockquote默认有margin，若嵌套在p里，要额外加margin-top: 0;防双倍间距 - 移动端小屏下，
padding-left: 1.2em可能不够，可加@media (max-width: 480px) { blockquote { padding-left: 1em; } } - 如果引用块内含代码块或表格，它们的
width默认按 content-box 计算，可能撑破容器——此时得给blockquote加box-sizing: border-box; - 复制文本时，
footer内容也会被复制，如需隔离，可用user-select: none;单独加在footer上
