17370845950

inline-block盒模型与block完全一致，但布局受限于行内环境；默认收缩包裹内容、高度由内容决定、vertical-alig

n影响对齐、空白间隙源于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 或内部块元素产生意外高度
• 如果内容含图片或行内替换元素（如 ），其固有尺寸会直接影响 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 中把标签写成 （无换行无空格）
• 注意：font-size: 0 会影响子元素所有文字，必须在子元素中重置 font-size

真正容易被忽略的是：inline-block 的盒模型没有「缺陷」，它的所有行为都严格遵循 CSS 规范；所谓「奇怪」，往往是因为开发者把它当成「轻量 block」来用，却忘了它本质仍是行内格式化上下文（IFC）中的一员——vertical-align、line-height、white-space 这些行内专属属性，才是它真正的控制开关。