display: inline-block 是一种独立的渲染模式，使元素既可同行排列又可设置宽高和边距；其空白间隙源于HTML换行符被解析为文本节点，可通过HTML标签连写、父容器font-size:0或vertical-align解决。
display: inline-block 是什么行为
它让元素既像 span 一样可以和其他内联元素排在一行，又像 div 一样能设置宽高、内外边距、对齐方式。不是“半内联半块级”，而是独立的第三种渲染模式。
常见错误现象：display: inline-block 元素之间会凭空多出几像素间隙（通常是 4px 左右），不是 margin，也不是 padding，是 HTML 换行符和空白符被浏览器解析为文本节点导致的。
- 使用场景：导航菜单项横向排列、图标+文字同行、网格式按钮组
- 不推荐用于整页布局替代
flex或grid，维护成本高、对齐麻烦 - IE8+ 支持，但 IE7 需加
zoom: 1; *display: inline;触发 hasLayout（基本可忽略）
怎么消除 inline-block 的空白间隙
根本原因是 HTML 中的换行和空格被当作字符渲染了，所以解决思路是“不让它产生字符”或“让它不占空间”。
- 方法一：HTML 标签写在同一行 ——
<div class="item"></div><div class="item"></div> - 方法二：父容器设
font-size: 0，子元素再重置font-size（注意行高继承问题） - 方法三：子元素设
vertical-align: top（只解决对齐错位，不消灭间隙本身） - 别用
margin-left: -4px硬调，响应式下会失效，且不同字体/缩放下数值不稳定
inline-block 和 float / flex 的关键区别
它不脱离文档流，但也不自动清除浮动；它不支持主轴/交叉轴控制，也不能让子项等分布局。
立即学习“前端免费学习笔记（深入）”；
-
float会脱离文档流，可能影响后续元素位置；inline-block不会 -
flex子项默认撑满剩余空间，inline-block子项宽度由内容决定，必须显式设width - 当需要垂直居中文字+图标时，
inline-block配合vertical-align: middle更直接；flex要设align-items - 性能上无明显差异，但
inline-block触发的重排范围更小（仅自身）
为什么有时候 width/height 不生效
因为某些元素天生不接受宽高设置，比如 img 在某些旧版 IE 下、或设置了 display: inline 的元素，强行加 inline-block 才能生效。
- 检查是否被其他 CSS 覆盖：用浏览器开发者工具看 computed 值里
display是否确实是inline-block - 替换元素（如
input、select）默认就是inline-block，再设一遍无效但无害 - 如果父容器是
white-space: nowrap，子项即使设了width也可能被压缩（取决于内容） - 不要指望
inline-block让p或h3自动变窄——它们仍按内容宽度渲染，需手动设width
