code标签默认为inline元素，不支持宽高和上下margin；需用display:block或inline-block修改显示模式，并注意语义合规与父容器限制。
code 标签默认是行内元素，不能直接设宽高、上下 margin 或垂直居中对齐 —— 这不是 bug，是它的显示模式决定的。
为什么 code 标签设了 width 和 height 没反应
因为 code 是原生行内元素（inline），和 span、a 一样：宽度由内容撑开，高度无法手动控制，margin-top/bottom 也不影响布局流。
- 给
code加background-color或padding能看到效果，但那是“视觉填充”，不改变盒模型在文档流中的位置 -
text-align: center在父块级容器上才生效；直接写在code上无效 - 想让它独占一行或撑满容器？必须改显示模式
用 display: block 让 code 独占一行并支持宽高
适合展示单行命令、短代码片段，需要左右留白或背景横贯整行的场景：
code {
display: block;
width: 100%;
padding: 8px 12px;
background: #f4f4f4;
margin: 1em 0;
overflow-x: auto;
}
- 加了
display: block后，width、height、margin全部生效 - 注意：它会自动换行，不再和前后文字同行 —— 如果嵌在段落里，可能破坏阅读流
- 若内容超长，建议补上
overflow-x: auto防止横向溢出
用 display: inline-block 保留行内特性同时控制尺寸
适合在句子中插入带背景/边框的代码词，比如「运行 npm install 命令」——既要高亮，又不能打断行文：
code {
display: inline-block;
padding: 2px 6px;
background: #eef;
border-radius: 3px;
font-size: 0.9em;
vertical-align: middle;
}
-
inline-block可设宽高、内外边距，又不会强制换行 - 务必加
vertical-align: middle，否则默认 baseline 对齐，容易和周围文字错位 - 多个
code并排时会出现空白间隙（来自 HTML 换行符），可用font-size: 0在父容器上临时消除，再单独设子元素字号
别忽略父容器的限制
即使把 code 改成 block，如果父元素是 span 或其他行内元素，仍可能被截断或渲染异常 —— HTML 规范禁止行内元素包含块级子元素。
- 检查父标签是否为
p、div、section等合法块级容器 - 若父级是
span或a，强行用display: block不报错，但语义错误，部分屏幕阅读器或打印样式可能出问题 - 最稳妥做法：用
span包裹code，再给span设display: block，保持嵌套合规
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
