vspace 属性不应再使用——它已被 html5 废弃，应改用 css margin；其失效因浏览器兼容性差、高 dpi 下数值失真、与 vertical-align 和 line-height 冲突；替代时需结合 display、vertical-align 和父级 line-height 综合调整。
vspace 属性在现代前端开发中**不应再使用**——它已被 HTML5 明确废弃，所有新项目都该用 CSS margin 替代。
为什么 vspace 会失效或表现异常
浏览器虽大多仍能解析 vspace，但行为不可靠：Chrome 和 Firefox 可能渲染出预期值，而新版 Safari 已对 img.vspace 的 JavaScript 赋值静默忽略；高 DPI 屏幕下数值常被放大（如 vspace="10" 实际渲染为 20px）；更关键的是，它与 vertical-align、line-height 冲突，导致图文混排时垂直对齐完全错乱。
- 旧代码里写
<img src="a.png" vspace="8">，实际效果依赖浏览器“兼容模式”，无法响应式缩放 - 通过 JS 动态设置
img.vspace = "12"在 Safari 17+ 中不触发重绘 - 若同时用了
align="middle"，vspace的留白会叠加在错误的基线位置上，文字看起来“飘”在图片上方
用 margin 替代 vspace 的实操要点
对应原 vspace="N"，应统一改用 margin-top 和 margin-bottom。但不能简单全局替换，需结合上下文判断：
- 若图片独立成行（如
<p><img></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/1888" title="墨狐AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680421461519.png" alt="墨狐AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/1888" title="墨狐AI" class="overflowclass">墨狐AI</a> <p class="overflowclass">一款面向网络小说创作的AI写作工具，可辅助进行故事构思、人物设定和长篇小说内容生成，帮助作者提高创作效率。</p> </div> <a rel="nofollow" href="/ai/1888" title="墨狐AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），直接加margin: Npx auto;即可 - 若图片在文本流中（如
文字<img>文字），仅加margin不够，必须同步设vertical-align: middle或top，否则 baseline 偏移会让留白“错位” - 若父容器有
line-height: 1.6，哪怕只设margin-top: 8px，也可能因行框高度膨胀而让视觉间距翻倍——此时要优先调低父级line-height或改用display: block - 内联样式迁移示例：
<img src="x.png" vspace="6">→<img src="x.png" style="max-width:90%">
图片底部空白间隙不是 vspace 导致的
很多人以为图片下方那条“看不见的缝隙”是 vspace 搞的，其实根源是 img 默认为 inline 元素，按 baseline 对齐，和父容器底边之间天然存在文字 descender 空间。这时加 vspace 只会让问题更糟。
- 最稳解法：
img { display: block; }—— 彻底脱离行内上下文，缝隙消失 - 保留行内布局时：
img { vertical-align: top; }或vertical-align: middle，但必须确保父容器没设display: flex或grid，否则vertical-align无效 - 若父容器是
<p></p>，记得检查其默认margin-bottom，那才是你看到的“额外空隙”来源
真正难处理的，永远不是属性名换不换，而是那些靠 vspace + align “凑”出来的视觉对齐——去掉后，baseline 关系重置，得重新用 vertical-align、flex align-items 或 transform: translateY() 拉齐。别跳过这一步。
