inline-block盒模型与block完全一致，但布局受限于行内环境；默认收缩包裹内容、高度由内容决定、vertical-align影响对齐、空白间隙源于HTML文本节点、所有行为均符合CSS规范。
inline-block 元素的盒模型本身和 block 元素完全一致，但它的布局行为被“卡”在行内环境里——尺寸能设、边距能写，可一放进文本流，就处处受限于 line box 和 vertical-align。
尺寸计算规则和 block 一样，但默认行为天差地别
box-sizing: content-box 下，width、height、padding、border、margin 都参与总尺寸计算，这点和 block 完全相同。但关键差异在于：
-
width不设时，inline-block 默认「收缩包裹内容」，而 block 默认「撑满父容器宽度」 -
height不设时，inline-block 高度由内容+padding+border 决定，不会自动拉伸；block 则可能因 line-height 或内部块元素产生意外高度 - 如果内容含图片或行内替换元素（如
<img>），其固有尺寸会直接影响 inline-block 的基线位置和行框高度
margin 和 padding 在垂直方向「存在但不生效」？其实是被掩盖了
inline-block 的 margin-top/margin-bottom 并非无效，而是它们作用在「行框内部」，无法推动相邻行的元素上下移动——这和 inline 元素不同，它确实会增加自身盒模型的外边距空间，但视觉上常被 vertical-align 和 line-height 吞掉。
-
padding-top/padding-bottom会正常渲染背景，但不撑开父容器高度，只影响当前行框的内部空间分配 - 多个 inline-block 垂直对齐混乱？大概率是没显式设置
vertical-align: top（默认是baseline） - 想让上下 margin 推动其他元素？不行——它不是文档流中的「块级占位者」，改用 flex 或 block + float 更直接
空白间隙是 HTML 解析问题，不是盒模型 bug
两个 display: inline-block 元素之间换行或空格，会被浏览器当作文本节点渲染出约 4px 间隙——这不是 margin，也不是 padding，而是「字符间距」级别的表现。
立即学习“前端免费学习笔记（深入）”；
- 修复方式之一：
.container { font-size: 0; } .col { font-size: 14px; } - 修复方式之二：HTML 中把标签写成
<div class="col"></div><div class="col"></div>（无换行无空格） - 注意：
font-size: 0会影响子元素所有文字，必须在子元素中重置font-size
真正容易被忽略的是：inline-block 的盒模型没有「缺陷」，它的所有行为都严格遵循 CSS 规范；所谓「奇怪」，往往是因为开发者把它当成「轻量 block」来用，却忘了它本质仍是行内格式化上下文（IFC）中的一员——vertical-align、line-height、white-space 这些行内专属属性，才是它真正的控制开关。
