vertical-align: baseline 是默认陷阱，所有 inline 和 inline-block 元素默认按基线对齐，而非视觉中心或顶部/底部，导致 img 下方空隙、图文偏移等错位；该属性仅对 inline、inline-block、table-cell 等生效，对 block、flex、grid 子项无效。
vertical-align: baseline 是默认陷阱
所有 inline 和 inline-block 元素默认按基线对齐，不是视觉中心，也不是顶部或底部。这个默认值在多数场景下会引发不可见但明显的错位。
常见现象包括：<img> 下方多出 2–4px 空隙、文字和图标上下偏移、多个 <li> 高度一致却“一高一低”。根本原因不是 margin 或 padding，而是浏览器把 <img> 的底边当基线，而文字的基线在字母 x 底部，两者天然不重合。
- 替换元素（
<img>、<input>、<svg></svg>）的基线 = 底边 margin edge - 纯文本内联元素的基线 = 最后一行文本中 x 字母的底部
- 空的
inline-block元素基线 = 自身底边；含文字的则按文字基线算
vertical-align 不作用于 block 元素
很多人误以为给 div 或 p 加 vertical-align: middle 能垂直居中——它完全无效。该属性只对以下 display 类型生效：inline、inline-block、inline-table、table-cell。
如果你发现 vertical-align 没反应，先检查 computed style 中的 display 值。设成 block 或 flex 后，这个属性就彻底被忽略，连 warning 都不会抛。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 想让块级容器内子元素垂直居中，请用
display: flex+align-items: center - 表格单元格可用
vertical-align，但仅限td/th，且父级必须是table或display: table-cell -
line-height只对单行纯文本有效，且要求容器高度固定、无换行
inline-block 元素之间“联动偏移”怎么来的
当你给某个 inline-block 元素加 margin-top，旁边元素也跟着上移——这不是 bug，是基线重计算的必然结果。
因为整行内联元素共享一条基线，一个元素上移后，浏览器会重新确定这行的基线位置，其余元素为维持 vertical-align: baseline 就得同步调整。这种“牵一发而动全身”的行为极易被误判为 margin 传染。
- 解决方式不是删 margin，而是显式设置
vertical-align: top（最稳定）或middle -
vertical-align: middle实际对齐的是“基线往上 ½ x-height”，不是元素几何中心，有字体依赖 - 若需精确控制，建议统一用
vertical-align: top，避免基线差异带来的不确定性
字体度量影响 vertical-align middle 的实际位置
vertical-align: middle 的定位点不是元素中点，而是基于字体度量：取当前字号下小写字母 x 的高度（x-height），再从基线向上偏移 ½ x-height。这意味着同一段 CSS 在不同字体下，对齐位置可能差 2–3px。
比如思源黑体和 Helvetica 的 x-height 差异明显，vertical-align: middle 对图标和文字的相对位置就会漂移。开发中若需跨字体稳定对齐，不要依赖 middle，改用 top 或布局方案（如 flex）更可靠。
- 可通过
font-size: 0在父容器上“清空”行内文本基线干扰，再单独设置子元素字号 - 用
ex单位（如height: 1ex）可实现与字体无关的尺寸锚定，但兼容性需留意 - 真正需要像素级对齐时，
vertical-align不是第一选择；transform: translateY()或 flex 更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
