block 包着 inline-block：为什么父级比子级高几像素
CSS 行盒 / baseline / strut 笔记。文中 24、26 为约数，不绑具体业务
一、现象
block 里包着一个 height: 24px 的 inline-block：
- 有时父级高度 ≈ 24（和子级边框盒一致）
- 有时父级高度 ≈ 26（比子级高约 2px）
DevTools 里点到的是父级变高；子级自己量仍是 24。
Elements 里通常也找不到一个「2px 高的兄弟节点」。
二、核心结论
父级被撑开的高度，跟的是里面的 行盒（line box），不是子元素的 边框盒。
<div class="wrap"> <!-- block -->
<div class="box">...</div> <!-- inline-block; height: 24px -->
</div>
- 原因1：不写
vertical-align时，子级默认baseline（文字基线） 对齐 - 原因2：父级行盒由字体排版参与计算（常见：
font-size、line-height，以及字体的 ascent / descent） - 原因3：父级行内还有一条隐形的 strut（撑杆），不是 DOM 节点，但会占高度
因此：子级 24，父级可以是 26。 多出来的约 2px 在边框盒外面的行盒里。
三、结构示意
父级内容高度 = 行盒高度 ≈ 26
行盒顶 ─────────────────
│ ┌─ .box 边框盒 24px ─┐ │
│ │ │ │
│ │······文字基线······ │ │
│ └─────────────────────┘ │
│ ░ 约 2px ░ │ ← 行盒比边框盒多出的部分（常见在下方）
行盒底 ─────────────────
直觉：行盒高度 ≈ 基线之上最高点 → 基线之下最低点。
子级的 24px 和 strut 都是内部高度；导致对齐后行盒可以大于 24。
不要用「内部 line-height: 22」去和 24 做加减解释 26。
内部行高只影响基线落在盒子里偏上还是偏下；外面多的是 26 − 24 ≈ 2。
子级内部文字结构一变（换节点、换字族/行高），基线在 24px 盒内的位置可能变，父级就可能从 24 变成 26。肉眼有没有字，不是判据。
四、怎么修
根因：默认 baseline → 行盒 > 边框盒。任选其一，也可叠加。
| 方法 | 做法 | 作用 |
|---|---|---|
| 1 | 父级 line-height: 0 |
压扁 strut |
| 2 | 子级有明确高度，设 vertical-align: top |
按顶对齐，不再跟基线钉在一起 |
| 3 | 父级 display: flex |
离开「匿名行盒 + baseline」（别再设 align-items: baseline） |
不推荐只锁死父级 height: 24px 来掩盖——能消抖，但会限制真正需要更高的内容。
自测：父级偏高时，临时加方法 1 或 2，高度差消失，就是这类问题
五、顺带一句
若更外层还有 display: flex; align-items: center，某一侧因行盒高了约 2px，旁边标题也可能被居中拉下约 2px。看起来像整行在抖，机制仍是 一侧变高 + 垂直居中。