inline-block 的 padding-top/bottom 渲染有效，但不撑开行高，因垂直对齐基于基线且 line box 高度由内容区决定；需配合 vertical-align 或改用 inline-flex 才实现布局影响。
inline-block 的 padding-top/bottom 为什么看起来“没用”
它其实有用，只是不推挤行高。inline-block 元素的 padding-top 和 padding-bottom 会真实渲染在元素视觉边界上，但不会撑开所在行的行高（line-height）。相邻文本或行内元素仍按原始基线对齐，导致 padding 区域可能被遮挡或重叠。
常见错误现象：
- 给
span设置display: inline-block+padding: 10px，顶部空白看不见 - 多个
inline-block按默认vertical-align: baseline排列，上下 padding 导致错位
解决建议：
- 显式设置
vertical-align: top或middle，让对齐基准可控 - 若需整体抬高内容，优先调
line-height或用transform: translateY()，而非依赖 padding - 避免在纯文本流中混用带大上下 padding 的
inline-block元素
inline-flex 的 padding-top/bottom 为什么“稳稳生效”
inline-flex 是一个**行内级弹性容器**，它的 padding 行为和 block 或 inline-block 都不同：它既保留了行内定位（不换行、可并排），又把内部子元素纳入 flex 布局上下文——而这个上下文自带独立的盒模型计算逻辑。
立即学习“前端免费学习笔记（深入）”；
关键区别在于：
-
inline-flex容器自身会生成一个“匿名行盒”，其padding会参与该行盒的尺寸计算 - 它的
padding-top/padding-bottom会直接影响容器高度，并向上/下推挤相邻行内内容（比如文字） - 即使子元素是
display: block，也不会突破容器的 padding 边界；flex 容器的 padding 是真正“围住”内容的
示例场景：
- 导航项用
inline-flex包裹a，加padding: 8px 12px后，整个按钮区域响应区域清晰，无重叠 - 与旁边一段
span文本并排时，inline-flex的上下 padding 会让它“顶起”整行，而inline-block不会
vertical-align 对两者的实际影响差异
vertical-align 只对**参与行内格式化上下文（inline formatting context）的元素**生效，而 inline-block 和 inline-flex 都属于这类。但它们的对齐锚点来源不同。
inline-block 默认对齐基线（baseline），这个基线由其最后一行内联内容（如文字）决定，容易受字体、line-height 干扰；inline-flex 的 baseline 则由 flex 容器的主轴起点（通常是顶部）和子项 align-items 共同决定。
实操建议：
- 不要依赖默认
vertical-align值做精确对齐，显式写vertical-align: top - 在
inline-flex中，align-items: center比vertical-align更可靠——因为它是容器级控制 - 若父容器是
font-size: 0清除间隙，记得重置子元素font-size，否则vertical-align计算会失准
什么时候该选 inline-flex 而不是 inline-block
核心判断点：你是否需要控制**内部子元素的排列逻辑**，而不只是单个元素的宽高和并排。
选 inline-flex 的典型场景：
- 按钮内图标+文字需要水平居中且等高对齐（
justify-content: center; align-items: center） - 一组标签需要自动等宽分布，或剩余空间均分（
flex: 1） - 子元素动态增减，但希望始终保持紧凑、无间隙、不换行
选 inline-block 的典型场景：
- 只是把几个
div并排显示，每个都固定宽高，不需要子项对齐或伸缩 - 兼容性要求极严（IE9+ 支持
inline-block，但inline-flex在 IE10+ 才稳定） - 样式极简，不想引入 flex 相关属性干扰调试
最容易被忽略的一点：inline-flex 容器哪怕只有一个子元素，也会强制启用 flex 格式化上下文——这意味着它不再受普通行内流的某些限制（比如 margin 折叠规则在 flex 子项中不适用），但也意味着它多了一层布局抽象，调试时得进两层盒模型看。
