应给高亮容器pre加padding并设box-sizing:border-box；若结构非pre则选实际父容器；启用行号插件时需同步增大padding-left和margin-left；推荐用css变量统一控制并设兜底值。
代码块高亮后文字贴边太挤，怎么加内边距
直接给 pre 或 code 加 padding 通常没用——多数语法高亮库（如 Prism、highlight.js）会把内容包裹在多层 span 或 div 里，原始标签的 padding 被子元素撑开或覆盖。真正生效的位置是高亮容器本身，比如 pre[class*="language-"] 或 code[class*="language-"]。
- 优先选
pre加padding：它包着整个代码块，加了就“呼吸感”立现 - 避免只给
code加padding：内部 token（如关键字、字符串）会把内边距撑变形，尤其换行时左右不齐 - 注意
box-sizing: border-box：默认是content-box，加了padding可能让代码块宽度超容器，加一句更稳
Prism.js 默认主题下 padding 不生效？检查包裹结构
Prism 默认把代码放进 pre → code 两层结构，但部分主题（如 prism-okaidia）或插件（如 toolbar）会额外插入 div，导致你写的 pre { padding: 1em; } 被继承打断或层级覆盖。
- 用浏览器开发者工具点开代码块，确认最外层是否真是
pre；如果不是，改选那个实际父容器（常见为div.highlight或figure.highlight） - 如果用了
autoloader插件，它可能动态插入code标签而跳过pre，此时得用属性选择器：code[data-language] { padding: 0.75em 1em; } - 别漏掉
white-space: pre的继承问题：某些重置 CSS 会把pre改成white-space: normal，padding 有了但换行失效，得手动恢复
行号插件（line-numbers）和 padding 冲突怎么办
启用 Prism 的 line-numbers 插件后，行号会以绝对定位塞进 pre 左侧，而你的 padding-left 若不够大，代码正文就会被行号遮住——这不是 bug，是设计如此。
- 必须同时调大
padding-left和margin-left：例如pre { padding: 1em 1em 1em 3.5em; margin-left: 3.5em; } - 行号宽度不固定（位数越多越宽），
3.5em是安全起点；若支持上百行，建议用min-width: 3.5em配合padding-inline-start更可靠 - 别试图用
text-indent推正文：它对pre无效，且会破坏空格敏感型代码（如 Python 缩进）的对齐
CSS 变量统一控制内边距，适配深色/浅色主题
如果你用 CSS 变量管理主题（比如 --code-padding），要注意变量作用域——放在 :root 里，pre 和 code 才能继承；但高亮库生成的内联 style 或 JS 注入的 class 可能覆盖它。
立即学习“前端免费学习笔记（深入）”；
- 写成
pre { padding: var(--code-padding, 1em); }，留兜底值，防变量未定义时塌陷 - 深色主题常需更大 padding（视觉上更“透气”），可配合
@media (prefers-color-scheme: dark)单独调整 - 移动端要单独处理：
@media (max-width: 768px) { pre { padding: 0.5em; } }，否则小屏上左右溢出
真正麻烦的是混合使用多个高亮器（比如 Markdown 解析器自带一套 + 手动加载 Prism），padding 规则容易打架。这时候别硬套全局样式，宁可给每个代码块加唯一 class，单独写规则——省调试时间。
