内联元素盒模型中垂直margin无效、padding可见但不推挤、border正常显示、宽高不可控，布局受line-height和vertical-align影响，需用inline-block等改变显示类型以突破限制。
内联元素（也叫行内元素）在css盒模型中的表现与块级元素有明显差异，这些差异直接影响布局和样式设计。理解盒模型如何作用于内联元素，有助于更精准地控制网页排版。
内联元素的盒模型特性
根据CSS规范，所有html元素都遵循盒模型，包括内容区、内边距（padding）、边框（border）、外边距（margin）。但对内联元素来说，这些属性的表现方式受到限制：
- 垂直方向的margin无效：margin-top 和 margin-bottom 对标准内联元素（如 span、a）几乎不起作用，不会影响行高或与其他行的间距。
- padding垂直方向可见但不推挤：padding-top 和 padding-bottom 可以设置，并且背景可见，但不会影响周围行的布局，可能导致内容重叠。
- border可正常显示：四个方向的边框都能渲染，包括上下边框，但同样不改变行间结构。
- width 和 height 无效：内联元素的尺寸由其内容决定，无法通过 width/height 控制。
例如，给一个 span 设置 margin-bottom: 50px，页面上不会有任何位置变化；而加上 padding-top: 10px 后，虽然视觉上有留白，但下一行文字仍紧贴原位置，可能造成视觉重叠。
行内元素与行高（line-height）的关系
内联元素的布局主要受 line-height 和 vertical-align 控制。每一行文本被看作一个“行框”（line box），内联元素在其内部垂直对齐。
- 实际占用高度由 line-height 决定，而非 margin 或 padding。
- 多个内联元素在同一行时，它们共享同一行框，该行框的高度等于行内最高元素的行高。
- vertical-align 可调整元素相对于基线的位置，如 top、middle、bottom 等值常用于对齐图标与文字。
比如按钮中的文字和小图标使用 span 包裹并设为 inline，可通过 vertical-align: middle 让两者居中对齐。
改变显示类型以突破限制
若需要让内联元素支持完整的盒模型行为，可通过 display 属性转换其类型：
立即学习“前端免费学习笔记（深入）”；
- display: inline-block：保留内联特性（不独占一行），同时支持 width、height、margin 和 padding 的完整应用。
- display: block：转为块级元素，脱离文本流，独占一行，适用于需独立布局的场景。
常见用途如导航链接（a 标签）设置固定大小或上下外边距时，通常改为 display: inline-block 或 flex 子项处理。
总结
内联元素虽遵循盒模型，但在垂直方向上的 margin 和尺寸控制受限。其布局更多依赖 line-height 和 vertical-align。当需要完整盒模型能力时，推荐使用 inline-block 或其他 display 类型进行调整。掌握这些细节，能避免常见排版错位问题。