行内元素有完整盒模型但受文本流约束；width/height无效，padding/border可见但不撑高行框，margin-top/bottom无效；inline-block可破局，需处理空格间隙和vertical-align对齐问题。
行内元素确实有盒模型，但它的“盒子”被压扁在文本流里
是的，span、a、strong 这类 display: inline 元素**完全遵循盒模型四层结构**：内容区 → 内边距 → 边框 → 外边距。但它不是“没盒子”，而是盒子被浏览器强制约束在“行框（line box）”中，导致很多属性看似失效——其实是生效了，但不推挤其他内容。
为什么 width/height 设置无效？关键在 display 类型和渲染上下文
行内元素的尺寸不由 width 和 height 控制，而由其内容（文字字形、字体大小、line-height）决定。浏览器在文本流中为它分配一个“字符级占位”，你写 width: 200px，它直接忽略。
-
padding-top/padding-bottom可设，背景会显示，但不撑高行框，下一行文字仍紧贴原 baseline -
margin-top/margin-bottom完全无效，不会影响任何垂直间距 -
border-top/border-bottom能渲染，但可能视觉上重叠相邻行的内容 - 真正决定行内元素垂直空间的是父容器的
line-height和自身的vertical-align
inline-block 是最实用的“破局方案”，但要注意两个隐藏坑
把 display: inline 改成 display: inline-block，就能启用完整盒模型：宽高可控、上下 margin/padding 生效、支持 vertical-align 对齐——但它不是“完美块级”，仍有两处容易翻车：
- HTML 中的换行符或空格会被当作文本节点，导致元素间出现约
4px的默认间隙；解决方式：父容器设font-size: 0，子元素再重置字体大小 -
vertical-align默认是baseline，常造成底部对齐错位（比如图标和文字不对齐），建议显式设为vertical-align: middle或top
box-sizing 对 inline 元素没意义，但对 inline-block 很关键
box-sizing 属性只影响 width/height 的计算逻辑，而标准行内元素根本无视 width/height，所以设 box-sizing: border-box 对纯 inline 元素毫无作用。但一旦用了 inline-block，它就立刻生效：
立即学习“前端免费学习笔记（深入）”；
.btn-text {
display: inline-block;
width: 120px;
padding: 8px 16px;
border: 2px solid #333;
box-sizing: border-box; /* 此时 width = 内容 + padding + border */
}这点常被忽略：如果你在 inline-block 上同时设了 padding 和 border，又没统一 box-sizing，不同浏览器或组件库之间极易出现宽度错位。
行内元素的盒模型不是“不存在”，而是“被文本流劫持了”。真正要动手布局时，别硬扛 inline 的限制，用 inline-block 或现代方案（如 display: flex 子项）更省心——但得记得关掉那个看不见的 HTML 空格和默认 baseline 对齐。
