优先用 padding-inline 和 padding-block 微调 code 标签内边距，嵌套 pre 时重置为 block 并设统一 padding，响应式下按屏幕尺寸和字体缩放调整，同时注意 line-height 与基线对齐。
code 标签默认 padding 过大导致文字贴边怎么办
浏览器对 code 标签有内置样式，Chrome/Firefox 默认加了 padding: 2px 0.4em，在紧凑排版（如行内代码、文档注释块）中常显得突兀，文字紧贴边界、缺乏呼吸感。
- 别直接写
padding: 4px—— 四边等距会破坏行内语义，上下 padding 挤压行高，左右 padding 又可能让单字符代码（如x）显得臃肿 - 优先用方向性写法：
padding-inline: 0.3em控制左右留白，padding-block: 0.15em微调上下（值小于默认，避免撑开行高） - 若用于行内场景（如段落中嵌入
const foo = 1），务必加box-sizing: border-box，否则 padding 会让元素总高度超出 line-height 计算范围，引发基线偏移
如何让 code 在 pre 中保持一致内边距
当 code 嵌套在 pre 里（常见于代码块），pre 自身有默认 margin 和 white-space 行为，而 code 的 padding 若不重置，容易和 pre 的 padding 叠加，造成视觉冗余。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 统一处理：给
pre code单独设padding: 0.5em 0.8em，并显式声明display: block（避免某些 UA 下仍按 inline 渲染） - 注意
pre的overflow-x: auto可能截断右侧 padding，需补padding-right: 1em并配合scroll-padding-right: 1em确保滚动时内容不被遮挡 - 若要保留
code行内特性（比如只高亮某几词），就别让它脱离pre的文本流，此时应改用background-color+border-radius替代 padding，更轻量且不干扰布局
响应式场景下 code 内边距适配小屏幕的要点
移动端窄屏中，0.4em 的左右 padding 可能导致单行代码换行或横向溢出，但盲目减小又会让点击区域过小（尤其触摸设备）。
- 用媒体查询分层控制：
@media (max-width: 480px) { code { padding-inline: 0.2em; } } - 对
code设置font-size: 0.875rem时，同步将padding-inline调整为0.25em（em 相对当前 font-size，能自然缩放） - 禁用
user-select: none时，padding 还承担着“可触控热区”功能——最小推荐padding-block: 2px（像素值，不随字体缩放），确保手指点击不误触相邻文字
code 的 padding 会影响其所在行的 line-height 计算，尤其当它和普通文字混排时。不要依赖父元素的 line-height 继承，而是用 padding-block 配合 vertical-align: middle 主动对齐基线。** 
