浏览器默认的 <code> 元素使用等宽字体、小号字号、无背景、零内边距且不换行；优化需覆盖 font-family、font-size、background-color、padding、border-radius 和 white-space，同时区分 inline 与 block 场景，并适配深色模式及移动端。
HTML code 元素默认长什么样
浏览器对 <code> 有固定样式：等宽字体（通常是 monospace）、小号字号、无背景、内边距几乎为零，且不换行——这在嵌入短代码片段时还行，但一旦放 console.log() 或带斜杠路径如 /api/v2/users，就容易挤在一起或溢出容器。
怎么覆盖默认样式又不破坏语义
关键不是重写所有属性，而是只改真正影响阅读的几项。直接给 <code> 加 CSS 即可，无需额外 class：
code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
font-size: 0.92em;
background-color: #f6f6f6;
padding: 0.15em 0.3em;
border-radius: 3px;
white-space: pre-wrap;
}
-
font-family换成更现代的等宽栈，避免 Windows 下Courier New的锯齿感 -
padding必须设，否则背景色紧贴文字，可读性差 -
white-space: pre-wrap让长代码自动换行，但保留空格和缩进（pre会强制不换行，normal又会吃掉缩进） - 别加
display: block——它会让行内代码块独占一行，破坏段落流
inline code 和 block code 要分开处理吗
要。同一套样式套在 <code> 和 <pre><code> 上，效果会打架。比如 padding 对单行 <code> 合适，但对多行代码块就显得太“肿”。
- 保持
<code>纯 inline 样式（如上） - 对
<pre><code>单独加规则：pre code { display: block; padding: 1em; overflow-x: auto; } - 如果用了语法高亮库（如 Prism），它通常会给
<code>加 class（如language-js），这时优先级更高，原生code规则不会干扰
移动端和深色模式下容易漏掉什么
两个典型坑：一是 iOS Safari 默认给 <code> 加了轻微阴影，导致背景色看起来发灰；二是深色主题下，硬编码的 #f6f6f6 背景色直接看不见。
- 用
color-scheme: light dark告诉浏览器该元素支持主题切换 - 背景色改用系统色：
background-color: CanvasText;（浅色下是黑字白底，深色下是白字黑底） - iOS 上加
-webkit-font-smoothing: antialiased;防止等宽字体发虚 - 别依赖
prefers-color-scheme媒体查询去重写全部样式——只换颜色相关属性，字体、间距这些保持一致
最麻烦的其实是行内代码里的反斜杠或点号，比如 C:\Users\name 或 obj.property，它们在窄屏里极易折断错位。这时候得靠 word-break: break-all 或 overflow-wrap: anywhere，但得慎用——前者会把 filename.js 拆成 filena…，后者更智能些。
立即学习“前端免费学习笔记（深入）”；
