嵌套在中合法但需样式微调：重置line-height为1.4、font-size为0.95em，用浅灰背景+圆角替代深色块，多行代码须改用组合，并注意html实体化与可访问性说明。
直接用 <code> 嵌套在 <p></p> 里完全合法，但默认样式常导致行高错乱、字体过小或背景突兀——关键不是“能不能放”，而是“怎么让它在段落里自然呼吸”。
为什么 <p><code>foo 看起来总有点怪
浏览器对 <code> 的默认样式（如 font-family: monospace、font-size: 1em、line-height: 1.2）是为独立代码块设计的，塞进段落时容易破坏整体行高节奏。常见现象包括：上下文字被“顶开”、小写字母 g/j/p 的下沿被截、斜体或加粗后宽度突变、深色背景在浅色段落中形成视觉硬块。
<code> 在 <p></p> 中的推荐写法
不改语义，只微调渲染行为：
- 保留
<code>标签本身，别用<span class="code"></span>替代——它失去机器可读性和语法高亮扩展能力 - 重置行高：
code { line-height: 1.4; }（与父<p></p>的line-height对齐） - 控制字体尺寸：
code { font-size: 0.95em; }，避免在小屏上撑破行宽 - 背景慎用：
code { background: #f5f5f5; padding: 0.1em 0.3em; border-radius: 3px; }—— 浅灰+圆角比纯黑底更融于正文 - 禁用换行截断：
code { white-space: nowrap; overflow-x: auto; }仅当内容极长且必须内联时启用，否则优先让其自然折行
遇到多行代码片段怎么办
<code> 本就不该承载多行内容；一旦看到 <code>function a() {\n return true;\n}，说明已越界：
- 单行逻辑表达式（如
JSON.parse()、Array.prototype.map）可用<code> - 含换行、缩进、注释的代码块，必须改用
<pre class="brush:php;toolbar:false;"><code></code> 组合，并脱离 <code><p></p></code> —— 否则浏览器会把换行符转为空格，破坏结构</pre> - 若需“段落内嵌入代码块”的视觉效果，用
<div class="inline-code-block"> + CSS Grid/Flex 模拟，而非强行塞进 <code><p></p>容易被忽略的可访问性细节
<code>是有明确语义的：表示计算机可执行或可引用的文本。但屏幕阅读器不会自动播报“这是代码”，除非你补全上下文：- 段落中首次出现时，建议前置说明，例如：
<p>调用 <code>fetch()方法发起请求，而不是孤立放<code>fetch()</code>
- 避免在
<code> 内再嵌套 <code><strong></strong>或<em></em>—— 语义冲突，且部分读屏软件会跳过强调 - 如果代码含特殊符号（如
、<code>&），必须 HTML 实体化：<、&，否则解析失败或 DOM 结构断裂
最常被漏掉的一点：改完样式后，务必在 Chrome DevTools Elements 面板里检查
<code>是否真在<p></p>内部——哪怕只多一个空格或换行，都可能触发浏览器隐式文本节点插入，导致textContent前后带不可见空白，影响 JS 字符串比对或复制粘贴精度。 - 段落中首次出现时，建议前置说明，例如：
