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 是“受限生效”的：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 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 或注释消除
