inline / inline-block / block 对照 + 修法总结
本系列各页分析的现象，根源都在 display 的三种取值上。这页把一个元素在 inline / inline-block / block 之间切换，给它加 width / height / margin / padding,实时量它的真实尺寸，看哪些属性生效、哪些被忽略。
1 · 三种身份的行为对照（高亮列 = 当前选中）
下面把目标元素在三种 display 之间切换，并叠加 width / height、margin、padding，舞台实测它的真实尺寸，对照表则高亮当前所选那一列的行为。
最后一行解释：inline 不是一个完整盒子，而是一截可拆的文字流。一个 <a>（默认 inline）横跨两行时，会被切成几个框分到各行——规范(CSS 2.2 §9.4.2)规定
「当一个 inline box 被拆开时，拆开处的 margin、border、padding 不产生视觉效果」，所以你会看到它的边框 / 背景在换行断点处「断开」、行末行首不收边。而 inline-block 是整体盒子，从不拆行（放不下就整个换到下一行）——这正是它和 inline
在横向上的根本区别，和垂直方向的区别（width/height 生效、撑行框）互为表里。
2 · 全系列实战修法速查
- inline-block 出现意外的上下错位 — 多半是 baseline 对齐 + 某个盒子有（负）垂直 margin / 不同高度。统一
vertical-align: top最直接；或确保各盒等高。 - 图片 / 图标下方多出几像素 — 给图
vertical-align: top（或middle/bottom），或给容器line-height: 0/font-size: 0，或干脆display: block。 - 横排 inline-block 之间有缝 — 能上
flex/grid就用，从源头绕开行内空白；遗留布局用父级font-size: 0+ 子元素设回字号。 -
图标 + 文字垂直居中始终差一点 — 目标是 cap 中线，而
vertical-align: middle对的是更低的 x 中线，所以总差一点。可靠方案：translateY(calc(50% - 1cap/2))或inline-flex + (ZWSP strut)。详见 07 · 图标对齐文本。 - 想要一个能设宽高、又能和文字同行的盒子 — 这正是
inline-block的典型适用场景：既像文字一样排在行内，width/height/垂直padding又全部生效。
总结：inline / inline-block 的所有反直觉现象，本质都是它们处在 IFC 里、默认按 baseline 排进 line box。遇到无法解释的垂直偏移时，先确认三件事：它的 baseline 在哪、vertical-align 是什么、这一行的 line-height / strut 有多高——答案基本就出来了。