行内元素有盒模型，但受line-height和vertical-align主导，width/height及上下margin无效，padding-top/bottom不增加行高；inline-block可设宽高和完整内外边距，但受vertical-align影响且存在HTML空格间隙。
有，行内元素（inline）**确实有盒模型**，但它不按你熟悉的 width/height + margin/padding 方式工作——它的盒模型被“压缩”进文本流中，受 line-height 和 vertical-align 主导，而不是独立占位。
行内元素的盒模型为什么“看起来没用”？
因为它的尺寸和布局行为被浏览器强制约束在“行框（line box）”里：
-
width和height设置无效（除非是替换元素，如<img>、<input>） -
margin-top/margin-bottom完全不参与布局计算，不会推开上下元素 -
padding-top/padding-bottom虽然渲染可见（背景/边框会撑开），但**不增加行高**，容易和下一行文字重叠 - 上下
border会显示，但可能视觉溢出当前行，也不影响其他行的位置
inline vs inline-block：关键差异在哪？
当你需要“保留同行排列 + 又想控制尺寸/垂直间距”，display: inline-block 是最常用解法，但它不是“万能补丁”：
- 它支持
width/height、完整的padding/margin（包括上下方向） - 但它仍受
vertical-align影响，默认baseline对齐，常导致底部留白 - HTML 中的换行符或空格会被渲染为约
4px的空白间隙（不是 margin！） - 多个
inline-block元素之间若写成多行 HTML：<span class="ib">A</span>\n<span class="ib">B</span>
就会出现间隙；解决方式是父容器设font-size: 0，子元素再重置字体大小
调试行内盒模型的三个实操技巧
别只靠眼睛猜，用工具验证真实行为：
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 中选中元素 → 右侧 Metric 面板看盒模型图示，注意
padding-top/bottom是否“悬空”在行框外 - 开启 Rendering 面板 → 勾选 Show line boxes，直观看到每行的行框高度如何被最高内容（比如带
padding-top: 20px的span）拉高 - 临时加全局样式快速暴露边界：
* { outline: 1px solid rgba(255,0,0,0.2); }这比border更可靠，不会干扰原有盒模型计算
真正容易被忽略的是：行内元素的“高度”本质上不是由自身决定的，而是由它所在的行框决定的；而行框高度 = 该行所有行内盒中「内容区 + 行内盒上下 padding/border + vertical-align 偏移」的最大组合值。改一个 span 的 padding-top，可能悄悄把整行都顶高了。
