code标签需CSS重置：显式声明等宽字体栈、固定字号、浅灰背景+圆角+内边距+深灰文字，并用CSS变量适配暗色模式，同时统一kbd/var/samp等语义标签样式。
code 标签默认用等宽字体，但字号小、浏览器渲染不一致、没背景没内边距——直接放代码根本没法看。得靠 CSS 重置，不能依赖默认行为。
为什么code在不同浏览器里看起来不一样
不是 bug，是浏览器「用户代理样式表」各自实现的差异：code 默认 font-size 是 smaller（Chrome）、13.33px（Firefox），font-family 也略有出入；更关键的是它不强制等宽字体栈，比如 Windows 上可能 fallback 到 Courier New，macOS 上是 Menlo，Linux 上可能是 DejaVu Sans Mono，字形宽度微差会导致对齐错乱。
- 别信“浏览器默认就等宽”，必须显式声明
font-family字体栈 - 字号必须设为固定值（如
14px）或相对单位（如0.875em），避免smaller这种不可控关键字 - Mac 系统启用「增加对比度」时，某些字体可能被强制替换，所以字体栈末尾一定要带
monospace兜底
怎么给code加基础可读样式
只改字体不够，行内代码块需要视觉隔离：浅灰背景 + 圆角 + 内边距 + 深灰文字，才能一眼识别出这是代码而非普通文本。
- 推荐字体栈：
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;（覆盖主流系统） - 必加三件套：
background-color: #f6f8fa;、padding: 2px 6px;、border-radius: 4px; - 文字颜色别用纯黑，
color: #24292e;在浅灰底上更柔和；如果嵌套在深色段落里，需配合background-color: #eef0f2;避免反差过强 - 行内
code建议加display: inline-block; vertical-align: middle;，防止和周围文字基线错位
<pre class="brush:php;toolbar:false;">嵌套时缩进/空格失效怎么办</H3>
<p>把多行代码塞进 <code><pre><code>...</code></pre>
后发现首行缩进没了、连续空格被合并——问题不在 code，而在 white-space 的作用层级没理清。
立即学习“前端免费学习笔记（深入）”；
- 只对
<pre>设white-space: pre-wrap;或pre;，让<code>继承即可；不要在code上重复设white-space - 要支持长行折断，加
word-break: break-word; overflow-wrap: break-word;，但注意pre-wrap对 URL 类无空格长串仍不折，得靠overflow-wrap补救 - 别给
code加margin，pre自带上下外边距，叠加后会撑开意外空白
暗色模式下code怎么自动适配
光靠 @media (prefers-color-scheme: dark) 改背景色远远不够：字体在深底上太亮会刺眼，第三方语法高亮插件生成的内联 style 可能覆盖你的规则，系统级「增加对比度」开关还会劫持 CSS 变量。
- 用 CSS 变量统一管理颜色，例如：
--code-bg: #f6f8fa; --code-fg: #24292e;，暗色模式下重定义为--code-bg: #161b22; --code-fg: #c9d1d9; - 字体颜色别设纯白，
#c9d1d9这类中灰比#ffffff更护眼 - 语法高亮插件（如 Prism、highlight.js）常往
code里插入<span class="token string">，它们的 color 规则优先级高于你写的code { color: ... }，得用更具体的选择器，比如pre code { color: var(--code-fg); }
最易被忽略的一点：很多人只改了 code，却忘了 kbd、var、samp 这些语义化文本标签也默认用等宽字体——它们该不该统一风格？如果要，就得一并纳入重置范围，否则文档里代码片段的视觉节奏就断了。
