默认display:inline导致上下padding不生效，需设为inline-block或inline-flex；加padding后文字被截断需调vertical-align和line-height；推荐用data-padding属性精准控制，避免全局污染。
直接用 padding 会失效？因为 <code> 默认是行内元素
给 <code> 直接写 padding: 4px; 看起来没反应，不是 CSS 写错了，而是它默认是 display: inline —— 行内元素不支持上下 padding 的视觉撑开（虽然属性生效，但不会影响行高或周围布局）。真正想加内边距，得先改显示模式。
- 最稳妥的做法：加
display: inline-block;或display: inline-flex; - 如果只用于单行代码片段，
inline-block足够且兼容性好（IE8+） - 避免用
display: block;，否则会强制换行，破坏文本流
<code> 加 padding 后文字被截断？检查 line-height 和 vertical-align
加上 padding 和 inline-block 后，有时文字顶部/底部被“吃掉”，常见于和普通文字混排时。这是因为 inline-block 元素默认按基线（baseline）对齐，而 padding 拉高了元素高度，导致视觉错位。
- 加
vertical-align: middle;或vertical-align: text-bottom;通常能立刻修复 - 同时微调
line-height（比如设为1.4）可让多行文本中的<code>更协调 - 别依赖父容器的
line-height去“撑开”它——<code>自身需要明确控制
想统一所有 <code> 的内边距？用属性选择器更安全
全局重置 <code> 样式时，直接写 code { ... } 很容易误伤文档中本该保持原样的内联代码（比如 Markdown 渲染出的、或 CMS 自动生成的）。更可控的方式是加类名或用属性标记。
- 推荐写法：
code[data-padding] { display: inline-block; padding: 2px 6px; vertical-align: middle; } - 在 HTML 中用：
<code data-padding>console.log() - 比纯类名（如
class="code-pad"）更轻量，也不依赖 JS 注入 - 避免用
!important—— 它会让后续调试和主题覆盖变得困难
真要高亮又带内边距？别只靠 <code>，配合 <pre class="brush:php;toolbar:false;"></pre> 或 background 才完整
单纯加 padding 只解决“留白”，但实际场景中，带背景色、圆角、字体等的代码块，往往需要组合处理。比如行内代码和代码块语义不同，不能一概而论。
- 单个函数或变量名（如
fetch()）：用<code data-padding>+ 小padding+ 浅灰背景 - 多行代码块：必须用
<pre class="brush:php;toolbar:false;"><code></code> 结构，此时 <code><pre class="brush:php;toolbar:false;"></pre>控制整体padding和overflow，<code>只管字体和颜色 - 注意
white-space: pre-wrap在<code>上可能干扰内边距表现，优先设在<pre class="brush:php;toolbar:false;"></pre>上
真正麻烦的不是加不加得上 padding，而是加完之后是否和周围文字对齐、是否在缩放或不同字号下依然可用——这些细节，光看 DevTools 的 computed styles 是不够的，得在真实段落里点开看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
