hspace 和 vspace 属性在 html5 中已废弃，应改用 margin 和 vertical-align 实现图像间距与对齐；margin 语义准确、支持响应式与动画，vertical-align 解决基线偏移问题。
hspace 和 vspace 属性已失效，别再写了
这两个属性在 HTML5 中被正式标记为 obsolete，W3C 规范里查不到，现代浏览器只是“暂时没删”，不代表能用。你写的 hspace="10" 或 vspace="5" 可能在 Chrome 里看着还行，但在 Safari 17+ 中通过 JavaScript 访问 img.hspace 会静默返回 undefined，CSS 覆盖时也完全不参与层叠计算。
为什么 margin 是唯一靠谱的替代方案
CSS 的 margin 不仅语义准确，还能响应式适配、支持动画、可被媒体查询控制，并且和 Flex/Grid 布局天然协同。关键差异在于：
-
hspace="12"表示左右各 12px → 对应margin-left: 12px; margin-right: 12px;或简写为margin: 0 12px; -
vspace="8"表示上下各 8px → 对应margin-top: 8px; margin-bottom: 8px;或margin: 8px 0; - 若原页面混用
align="middle"和vspace，去掉后者后文字会突然“下沉”，必须补上vertical-align: middle;才能复现旧效果
迁移老代码时最常漏掉的三件事
全局搜索替换 hspace=/vspace= 看似简单，实际容易翻车：
- 服务端模板（如 PHP 的
<?php echo '<img hspace="'.$gap.'">'; ?>）里的拼接字符串必须一并清理，否则 DOM 里会残留无意义属性 - 原样式依赖
vspace“撑开”行高来对齐图文，仅加margin后line-height会塌缩，得检查父容器是否需加font-size: 0;或改用display: flex; align-items: center; - 外部 CSS 文件中若有
img { margin: 0; }这类重置规则，内联写的style="margin: 6px 12px;"会被覆盖，得确认层叠优先级或加!important（临时救急）
行内图像间距的典型写法
多数场景下，直接写内联样式最可控：
@@##@@
注意两点：
- 数值可直接沿用原
hspace/vspace值，但顺序是margin: [top] [right] [bottom] [left]，别套错 -
vertical-align不是可选项——只要图像在文本流中，缺了它，哪怕 margin 写对了，基线也会偏移，导致上下文字“飘”或“沉”
真正难调的从来不是像素值，而是那些靠 vspace “凑”出来的视觉对齐关系；一旦换成 margin，baseline 就回归标准逻辑，你得重新按 CSS 规则去拉齐。
