inline-block元素默认vertical-align: baseline导致错位，统一设vertical-align: top/middle可修复；html换行产生空格间隙，可用font-size: 0或flex布局解决。
行内块元素默认对齐 baseline 会错位
行内块元素（display: inline-block）默认按 baseline 对齐，不是顶部或中间——文字有下降部（如 g、y 的尾巴），img 或 div 就会“悬空”在文字下方，看着像没对齐。
- 常见错误现象：
<span>文字</span><div style="display:inline-block">块</div>左右高度不齐，右边块“下沉” - 根本原因：浏览器把
inline-block当作文本字符处理，对齐线是字母基线，不是盒模型上边缘 - 解决核心：显式设置
vertical-align，值选top、middle或bottom，别留默认 - 推荐统一写
vertical-align: middle，它对齐的是父容器的中线（不是子元素中线），兼容性好且视觉稳定
HTML 换行缩进会引入看不见的空白符间隙
inline-block 元素之间只要存在 HTML 源码里的换行或空格，就会被渲染成一个空格字符（约 4px 宽），导致元素间有缝隙，看起来“没贴紧”。
- 常见错误现象：多个
inline-block并排，明明写了width: 33.33%却换行了；或按钮组之间出现无法消除的白边 - 真因不是 CSS margin，而是 HTML 解析时把回车/空格当作了文本节点
- 临时解法：把 HTML 中相邻
inline-block标签写在同一行，比如<div></div> <div></div> - 稳妥解法：父容器设
font-size: 0，子元素再重置font-size（注意继承影响） - 替代思路：改用
flex布局——display: flex下间隙问题天然消失，且支持align-items精确控制对齐
text-align: center 对 inline-block 有效但只管水平
给父容器设 text-align: center，能居中所有 inline 和 inline-block 子元素，但它只作用于水平方向，垂直方向仍由 vertical-align 控制。
- 适用场景：导航菜单项、图标组、多按钮并排居中
- 失效条件：父容器用了
display: flex或display: grid，此时text-align被忽略 - 别混淆：不能指望
text-align: center让块级子元素（如div）居中——它只影响行内级内容 - 若需完全居中（水平+垂直），必须配合
vertical-align: middle+ 行高控制（单行）或改用flex布局
vertical-align 不是给父容器设的，也不能用于 block 元素
vertical-align 只对 display 值为 inline、inline-block、table-cell 的元素生效，且必须直接写在该元素上，不是父容器。
- 常见错误：给父
div设vertical-align: middle，结果毫无反应 - 正确写法：
<div style="display:inline-block; vertical-align: middle">内容</div> - 值差异：
middle对齐父容器中线；top对齐父容器上边缘；bottom对齐下边缘；baseline是默认值，容易出错 - 性能提示：频繁用
vertical-align配合行高做垂直居中，不如直接切到flex——后者语义清晰、调试直观、无隐式依赖
vertical-align 和 text-align 混着用却没意识到它们作用域完全不同：一个管单个元素在行内的上下位置，一个管整行内容在容器里的左右位置。调不对，不是偏上就是偏下，还查不出样式冲突。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
