图像与边框对齐由vertical-align、display和父容器行高/布局共同决定；默认inline导致基线对齐而显下沉；可用vertical-align调整或改用display:block/flex彻底解决。
图像与边框对齐不是靠 align 属性（它已废弃），而是由 CSS 的 vertical-align、display 和父容器的行高/布局模式共同决定的。
为什么 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 总是和文字底部不对齐？
因为 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 默认是 inline 元素，会像字母“g”“y”一样在基线（baseline）对齐——图像底边实际对齐的是文字的基线，不是底线，所以看起来“下沉”了。
-
vertical-align: baseline是默认值，造成视觉错位 - 父元素若有文字，行高（
line-height）会撑开包含区域，进一步放大错位感 - 加
border后更明显，因为边框把真实边界暴露出来了
快速解决：用 vertical-align 调整对齐方式
适用于行内上下文（比如图文混排），直接作用于 <img alt="HTML5图像位置怎么确定图像与边框对齐咋弄_边框对齐调整技巧【技巧】" > 标签本身：
@@##@@
-
vertical-align: top→ 对齐父容器内容区顶部 -
vertical-align: middle→ 对齐父元素font-size的中线（非绝对居中） -
vertical-align: bottom→ 对齐父元素内容区底部（比baseline更直观） - 避免用
vertical-align: text-bottom，它仍受字体度量影响，不推荐
彻底摆脱对齐困扰：改用 display: block 或 Flex 布局
当图像不需要和文字同行显示时，这是最干净的解法——移除 inline 行为，让边框完全按盒模型渲染：
