inline元素有盒模型但受限生效：content、水平padding/border/margin有效，垂直方向属性不参与布局；vertical-align关键因默认基线对齐易错位；需完整控制时应改用inline-block。

有，inline 元素确实有盒模型，但它只部分生效——内容区、水平方向的 padding/border/margin 起作用，而垂直方向的 padding、border、margin 和 width/height 属性基本不参与布局计算。

inline 元素的盒模型组成部分

inline 元素也包含 content、padding、border、margin 四层，但各层对布局的影响不对称：

• content 区域：由字体大小（font-size）、行高（line-height）和实际内容（文字或替换元素如 img）决定高度；宽度由内容自然撑开，不能用 width 控制
• padding：left/right 有效，会推开相邻 inline 元素；top/bottom 虽然渲染可见，但不撑开行高，也不影响上下行位置
• border：left/right 同样影响水平间距；top/bottom 可见但不改变行框（line box）高度
• margin：只有 margin-left 和 margin-right 生效；margin-top 和 margin-bottom 完全无效，不会推挤其他行内元素或改变行距

与 block 元素盒模型的核心差异

block 元素盒模型是“完整可用”的，而 inline 是“受限生效”的：

• block 元素可自由设置 width/height，inline 元素设置后被忽略（img、input 等替换元素除外）
• block 的 padding/border/margin 在四个方向都“推开”周围元素；inline 的垂直方向属性仅视觉存在，不参与布局流
• block 元素独占一行，其外边距可能发生合并（margin collapse）；inline 元素始终在行框内排列，没有 margin 合并概念
• block 的尺寸基于 content-box 或 border-box 计算；inline 的“高度”实际由所在行框（line box）统一分配，由该行最高内容决定

为什么 inline 元素 vertical-align 很关键

因为 inline 元素默认按基线（baseline）对齐，而基线位置受 font-size、line-height、甚至父容器的 line-height 影响。一个看似简单的 span 和 并排时出现错位，往往不是盒模型失效，而是 vertical-align 没显式控制：

• 设置 vertical-align: middle 可让元素中点与父行框中线对齐
• vertical-align: top/bottom 是相对于当前行框的顶部/底部对齐，不是整个容器
• 避免依赖默认 baseline，尤其混排文本与图片时，统一设为 middle 或 top 更可控

什么时候该换用 inline-block

当你需要 inline 的横向排列特性，又想要块级的完整盒模型控制时，display: inline-block 是标准解法：

• 可以设置 width/height，且真正生效
• padding、border、margin 在四个方向都影响布局
• 仍保持与其他 inline 或 inline-block 元素同行排列
• 注意：它会保留 HTML 中的空白符（空格、换行）产生的间隙，可通过父元素 font-size: 0 或注释消除