inline-block 并非修复行内元素尺寸问题，而是主动选择以获得宽高控制权；设后 width/height/margin/padding 均生效，但需处理空白间隙和 vertical-align 错位，现代项目优先用 flex 替代。
inline-block 不是用来“修复”行内元素尺寸问题的，而是你主动选择它来获得宽高控制权——只要设了 display: inline-block，width、height、上下 margin 和 padding 就立刻生效。
为什么 inline 元素不能设 width/height
像 <span></span>、<a></a> 这类默认 display: inline 的元素，尺寸由内容撑开，width 和 height 属性被忽略。这不是 bug，是 CSS 规范明确规定的渲染行为。
- 例外只有替换元素（如
<img>、<input>），它们虽是 inline，但浏览器允许设宽高 - 想让普通文字容器（比如按钮文字外层
<span></span>）有固定尺寸，必须脱离 inline 渲染上下文
display: inline-block 是最直接的解法
它保留了“不换行”的特性，又赋予块级盒模型能力。但要注意：它会引入两个典型副作用——间隙和垂直对齐错位，不是设了就完事。
- 设
display: inline-block后，width、height、margin-top/bottom、padding-top/bottom全部可用 - 但相邻元素间会出现 ≈
font-size× 0.25em 的空白（源码换行/空格导致），需额外处理 - 默认
vertical-align: baseline，图文混排时容易一高一低，必须显式设置vertical-align
vertical-align 必须显式写，别信 middle
vertical-align: middle 在响应式场景下极不稳定——它对齐的是父行框内 text-top/text-bottom 的中点，受 font-size、line-height、兄弟元素字体影响，一调字号就漂移。
- 推荐用
vertical-align: text-bottom：把底边对齐到父容器 em-box 底边，结果可预期 - 或
vertical-align: top：对齐父行框顶部，完全不依赖字体度量 - 别给父容器设
font-size: 0来“顺便解决对齐”，那会把文字搞消失，还得逐个重设子元素字号
现代项目优先考虑 flex 替代 inline-block
如果你的目标只是让多个元素并排且可控尺寸间距，display: flex + gap 比 inline-block 更干净：没有间隙问题、没有 baseline 错位、vertical-align 失效反而是好事（该用 align-items）。
- 支持度已覆盖 Chrome 89+、Firefox 63+、iOS Safari 14.1+，IE 不在考虑范围内
- 回退方案简单：
margin-right: 8px+:not(:last-child)即可兼容旧环境 - 真正容易被忽略的是：当团队一边用
font-size: 0消间隙，一边又加letter-spacing: -0.31em补丁时，这些补丁本身会干扰屏幕阅读器解析和缩放渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
