display: inline-block 使行内元素获得完整盒模型控制权，同时保持行内流位置特性，支持宽高、内外边距及 vertical-align 对齐。
为什么 display: inline-block 能“修好”行内元素的盒模型
行内元素（比如 <span></span>、<a></a>）天生不响应 width、height、padding-top、margin-bottom 等盒模型属性——不是 CSS 写错了，是规范就这么定的。把 display 改成 inline-block，本质是让元素保留行内流位置特性（不换行、受父容器文本对齐影响），同时获得块级盒子的完整盒模型控制权。
关键点在于：它既不是纯行内，也不是纯块级，而是一个“带行内布局约束的块级盒子”。所以你能设宽高、内边距、外边距，也能和其他文字并排，还能用 vertical-align 微调垂直位置。
vertical-align 不生效？大概率没配 inline-block
很多人给 <img alt="CSS如何处理行内元素的盒模型缺陷_通过display:inline-block激活" > 或 <span></span> 加了 vertical-align: middle 却没反应，是因为默认 display: inline 下，vertical-align 只作用于“行内框”的基线对齐逻辑，但此时上下内边距和高度不可控，视觉上就“动不了”。一旦加了 display: inline-block，这个对齐才真正可操作。
-
vertical-align的取值（如top、middle、bottom）只在inline或inline-block元素上起效 - 若父容器有
line-height，inline-block元素会按该行高参与对齐计算，容易意外偏移 - 避免混用
float和inline-block——float会让元素脱离行内流，vertical-align直接失效
常见踩坑：空白符、换行、字体继承干扰布局
inline-block 元素之间的 HTML 换行或空格，会被浏览器渲染成一个空格字符，导致元素间出现约 4px 的间隙。这不是 bug，是规范行为——它把 HTML 文本节点当作了真实内容。
立即学习“前端免费学习笔记（深入）”；
- 解决方法之一：父容器设
font-size: 0，子元素再单独设字体大小 - 更稳妥的做法：用注释
<!-- -->消除标签间的空白，例如<span></span><!-- --><span></span> -
inline-block会继承父级的font-size和line-height，哪怕你只想要一个图标按钮，也可能被撑开；建议显式重置：font-size: 0; line-height: 1;
替代方案比一比：什么时候别硬用 inline-block
现代布局中，inline-block 主要用于兼容老浏览器或极简场景。如果项目支持 Flex 或 Grid，它们更可控、无空白干扰、对齐语义清晰。
- 想让几个按钮水平排列且等高？用
display: flex更直接，不用操心vertical-align和空白符 - 需要响应式换行？
inline-block需配合white-space: nowrap+ 宽度控制，而flex-wrap: wrap是原生支持 - IE8 及以下必须支持时，
inline-block是少数能兼顾宽高和行内流的方案；但 IE8 对inline-block只支持原生行内元素（如<span></span>），对<div> 需额外 hack：<code>display: inline; zoom: 1;真正难处理的，是那些既要嵌入文本流、又要精确控制尺寸和对齐，还不能改结构的场景——这时候
inline-block还是绕不开的那块砖，只是得记得它带着一堆隐式依赖来。
