hspace 和 vspace 在 HTML5 中已被废弃，因不响应式、不兼容现代布局、干扰对齐逻辑；应统一改用 CSS margin，并同步调整 vertical-align 或 flex 对齐。
hspace 和 vspace 是 HTML4 时代用于控制 <img> 元素周围空白的属性，但它们在 HTML5 中已被完全废弃，浏览器虽大多仍能解析，但不应再使用。
为什么现代项目里别写 hspace/vspace
这两个属性从 HTML5 规范中移除，W3C 明确标记为“obsolete”。主流浏览器（Chrome、Firefox、Safari、Edge）虽未立即禁用，但已不保证长期兼容；更重要的是，它们无法响应式缩放、不支持 CSS 选择器控制、不能与 Flex/Grid 布局协同，且会干扰 vertical-align 和 line-height 的计算逻辑。
常见错误现象包括：
- 在高 DPI 屏幕下间距显示异常（如 vspace=10 渲染成 20px）
- 与
align="middle"同时使用时，垂直对齐失效 - 通过 JavaScript 修改
img.hspace或img.vspace在部分新版本 Safari 中静默失败
替代方案：用 CSS margin 精确控制图像外边距
用 margin 替代是唯一推荐路径。它语义清晰、可继承、可动画、支持媒体查询，并与现代布局模型无缝衔接。
典型做法：
- 水平间距（原
hspace="15"）→margin-left: 15px; margin-right: 15px; - 垂直间距（原
vspace="8"）→margin-top: 8px; margin-bottom: 8px; - 若需统一四边 → 直接写
margin: 8px 15px; - 若图像在行内文本中，且需避免撑高行距，优先用
vertical-align: middle;配合margin
示例：
<img src="icon.png" alt="logo" style="margin: 6px 12px;">
旧代码迁移时容易漏掉的关键点
直接全局搜索替换 hspace= / vspace= 并不安全，因为：
- 有些老代码把
hspace当作“左右各多少像素”，而 CSS 的margin: 0 10px表示左右都是 10px —— 数值可直接复用，但语义已不同 - 若原页面依赖
align+vspace实现图文混排，仅加margin可能导致基线偏移，必须同步检查vertical-align值 - 内联样式替换后，若存在外部 CSS 覆盖了
margin，需确认层叠顺序（比如!important是否被误删） - 服务端模板（如 PHP/Java JSP）中拼接的
hspace字符串，需一并清理，否则残留属性会污染 DOM
真正麻烦的从来不是属性名换不换，而是那些靠 vspace “凑”出来的垂直对齐效果——一旦去掉，文字和图片的 baseline 关系就全变了，得重新用 vertical-align 或 flex align-items 拉齐。
