HTML元素hspace属性和vspace属性废弃后怎么写外边距-html教程-PHP中文网

hspace/vspace 从 html5 起被标准彻底移除，非兼容性问题而是语法非法；必须用 css margin 替代，且需配合 display（inline 时用 vertical-align + margin，block 时用 margin + 防塌陷）及上下文判断。

html元素hspace属性和vspace属性废弃后怎么写外边距

hspace/vspace 为什么完全不能用了

浏览器不是“偶尔不支持”，而是从 HTML5 标准起就移除了 hspace 和 vspace 属性——它们连语法合法性都没有了。img 元素上写 hspace="10"，DOM 中读 element.hspace 是空字符串或 0，开发者工具的 Styles 面板里根本不会出现对应规则。这不是兼容性问题，是属性本身已被标准废弃，现代引擎直接跳过解析。

替代方案必须用 CSS margin，但 display 模式决定效果

默认情况下 img 是 display: inline，此时：
• margin-left/margin-right 能生效，但视觉留白受 line-height 和 vertical-align 干扰
• margin-top/margin-bottom 在计算上存在，但被锁在行框内，不推挤上下元素
所以不能只加 margin，得配合 display 控制：

图文混排需保持内联流：用 vertical-align: middle + margin（比如 margin: 0 12px）
单图、全宽图、居中图等无需文字环绕：直接 display: block + margin（如 margin: 20px auto）
批量控制统一间距：定义类，比如 .img-hspace-15 { margin: 0 15px; }

别踩这些 margin 写法坑

margin 看似简单，但实际效果常因写法模糊而翻车：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

只写 margin: 10px → 四边都是 10px，但若图片是 inline，默认垂直方向不“显形”
只写 margin-left: 10px → 右侧没留白，图文环绕时文字可能贴边
用 style="margin: 0 20px" 写内联样式 → 可调试但难维护，且会被父容器的 flex/grid 间距逻辑覆盖
误以为 margin 能调表格内部单元格间距 → 实际上 table 的 margin 只作用于整个表格盒子，内部靠 border-spacing 或 padding

外边距塌陷（margin collapse）容易被忽略

当 img 设为 display: block 后，margin-top/margin-bottom 生效了，但紧接着会遇到塌陷问题：

相邻块级元素（比如 p 后紧跟 img）的垂直 margin 会合并，取较大值，不是相加
例如 p { margin-bottom: 1.2em; } + img { margin-top: 20px; } → 实际顶部间距约是 20px，不是 20px + 1.2em
解决方法不是硬加更大值，而是打断流式布局：给父容器加 overflow: hidden，或改用 padding 替代其中一侧 margin

真正关键的不是“怎么写 margin”，而是先判断图片所处上下文——是否混排文字、是否在 flex 容器里、是否紧邻其他块级元素。这些条件比属性名本身更影响最终呈现。