inline-block 是独立显示类型，既保持行内布局特性（同行排列、受 vertical-align 影响），又支持完整盒模型（width/height/padding/border/margin 均生效）；其 vertical-align 作用于行框基线，常致底部空隙，可用 font-size: 0 或 flex 替代。
inline-block 元素的盒模型行为和 display 值本质
display: inline-block 不是“行内 + 块”的简单叠加，而是独立的显示类型。它让元素保留 inline 的布局上下文（同行排列、受 vertical-align 影响），但同时获得 block 级别的盒模型控制权：可以设置 width、height、padding、border、margin，且这些值全部生效——这点和纯 inline 元素（如 span）有根本区别。
为什么 inline 元素设 width/height 无效，而 inline-block 可以
因为 inline 元素的尺寸由内容撑开，width 和 height 属于「不适用于该显示类型的属性」，被浏览器忽略。而 inline-block 明确启用了盒模型的完整计算逻辑，width 和 height 会参与 layout 阶段的尺寸计算。
-
inline元素：设置width: 200px→ 浏览器静默忽略 -
inline-block元素：设置width: 200px→ 实际占据 200px 宽度（含 padding/border，取决于box-sizing） - 注意：
margin-top/margin-bottom在inline-block中有效，但不会像block那样触发外边距合并（collapsing）
vertical-align 对 inline-block 元素的实际影响
vertical-align 是 inline 和 inline-block 共享的关键布局属性，但它作用对象不是父容器，而是当前行内的基线（baseline）或行框（line box）。默认值 vertical-align: baseline 会让元素底部与父文本的基线对齐，常导致下方留白（因基线下方有 descender 空间）。
- 常见现象：多个
inline-blockdiv并排，底部出现意料之外的空隙 - 解决方式之一：
vertical-align: top或vertical-align: middle - 更彻底方案：父容器设
font-size: 0，子元素重设字体大小（消除空白字符渲染带来的行高干扰）
兼容性与现代替代建议
display: inline-block 在 IE8+ 完全支持，但 IE6/7 需 hack（如 *display: inline; *zoom: 1）。如今多数场景下，它正被更可控的布局方式替代：
立即学习“前端免费学习笔记（深入）”；
- 水平排列需求 → 优先用
display: flex（父容器设display: flex，子项自动 inline-block-like 行为，无空白问题） - 网格化布局 →
display: grid更精准 - 仍需 inline-block？务必检查
white-space和换行符是否引入空格（HTML 中的回车/缩进会被渲染为一个空格，影响 inline-block 间距）
/* 示例：清除 inline-block 间的空隙 */
.container {
font-size: 0;
}
.container > div {
font-size: 14px; /* 恢复文字大小 */
display: inline-block;
}真正容易被忽略的是：inline-block 的“行内性”始终存在——它永远受限于行框高度、line-height 和周围文本，一旦涉及垂直对齐或响应式换行，复杂度会快速上升。这时候别硬扛，换 flex 就是更直白的解法。
