span、a、strong等纯内联元素默认display: inline，不参与块级盒模型，width和height被忽略是css规范行为；需设为inline-block等才能生效。
width 和 height 对 span、a、strong 等纯内联元素无效，不是浏览器 bug，而是 CSS 规范明确规定的渲染行为：它们不参与块级盒模型计算，尺寸完全由内容和行高决定。
为什么 inline 元素的宽高设置会被忽略
浏览器按文本流渲染 display: inline 元素，其外在盒子只负责“串行排列”，内在盒子不接受显式尺寸控制。此时设置的 width 和 height 在 Computed 面板中通常被划掉，margin-top/margin-bottom 同样不生效。
- 内联元素的“高度”实际由
font-size+line-height共同撑开，不是由height控制 -
padding-top/padding-bottom虽然能设，但不会推挤邻近元素（可能视觉重叠） - 替换元素如
img、input是例外，它们天生支持宽高，但不属于“纯内联元素”范畴
用 display: inline-block 解决最稳妥
这是语义合理、兼容性好（IE8+）、且保留行内上下文的首选方案。它让元素获得完整盒模型能力，同时不破坏原有文本流位置。
- 支持
width、height、padding、margin（上下 margin 也生效） - 默认
vertical-align: baseline，常导致与文字错位，建议显式设为vertical-align: middle或top - HTML 中换行或空格会渲染为约 4px 的空白间隙，可通过父容器设
font-size: 0或移除标签间空白符规避 - 不要和
float混用——inline-block本就不需要浮动来并排
其他可行方案及其适用边界
不是所有场景都适合 inline-block，需按语义和布局目标选型：
-
display: block：适合本该独占一行但仍需嵌入段落中的元素（如强调标题词），但必须配合float: left或display: flex父容器才能回归行内流 -
display: inline-flex：适合需要内部对齐（如图标+文字居中）的行内组件，但注意flex本身会让子项脱离文本流，慎用于纯文本环境 -
display: table-cell：仅在需等高、基线对齐或模拟表格列宽时考虑，语义偏离大，现代项目尽量避免
调试时最容易忽略的三个点
很多问题不是改了 display 就立刻解决，真正卡住的地方往往藏在细节里：
- 开发者工具中检查的是最终 computed
display值，不是声明值——确认没被 JS 动态覆盖或 CSS 优先级更高的规则拦截 -
box-sizing: border-box要配合使用，否则padding+border会撑出预期之外的总尺寸 - 如果父容器是 Flex 容器，子项的
height可能被align-items: stretch覆盖，需加align-self: flex-start或设flex-shrink: 0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
