直接用margin-left或margin-right最快，但必须先确认图片display模式；img margin="10"无效因margin是CSS属性而非HTML属性，hspace/vspace已废弃，所有间距控制必须走CSS。
直接用 margin-left 或 margin-right 最快，但必须先确认图片的 display 模式——缺了 display: block 或等效处理，上下边距可能“失效”，左右虽能用，但混排时容易错位。
为什么 img margin="10" 完全没反应
浏览器会静默忽略这种写法。margin 是 CSS 属性，不是 HTML 属性；hspace 和 vspace 早已废弃，现代浏览器根本不识别。所有生效的间距控制，必须走 CSS 规则。
- 检查开发者工具的
Computed面板，确认display值是inline（默认）还是已改为block/inline-block - 若图片在段落中与文字同行，
display: block会打断流式布局，此时改用vertical-align: middle更合适 - 不要依赖内联样式如
<img style="max-width:90%" alt="HTML怎么设置图片水平间距_网页图片并列排版【说明】" >——可维护性差，且无法覆盖父容器的 flex/grid 间距逻辑
margin-left 和 margin-right 在图文混排中怎么配才不挤
左右外边距对 inline 元素本身是有效的，但实际视觉留白受 line-height 和基线对齐干扰。稳妥做法是明确控制方向和目的：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 左浮动图片：加
margin-right: 1.5rem，把右侧文字推开 - 右浮动图片：加
margin-left: 1.5rem，避免文字贴边 - 多张横向排列（非 flex）：只给中间图片设
margin-left: 20px，比全设margin: 0 20px更易控边缘 - 用
:first-child和:last-child清除首尾多余 margin，例如：.gallery img { margin-left: 12px; } .gallery img:first-child { margin-left: 0; }
用 Flex 或 Grid 的 gap 替代 margin 更省心
当图片是并列关系（比如画廊、产品列表），别硬调每张图的 margin——gap 是专为子元素间距设计的，不侵占项目自身盒模型，也不受 display 类型影响。
立即学习“前端免费学习笔记（深入）”；
- Flex 场景：
.gallery { display: flex; flex-wrap: wrap; gap: 12px; }，此时img可保持inline或block，都无妨 - Grid 场景：
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }，row-gap和column-gap可分开设 - IE 不支持
gap：需 fallback，例如加.gallery img:not(:first-child) { margin-left: 12px; }并用 @supports 检测覆盖 -
gap作用于容器，不是图片自身——别写成img { gap: 12px; }，这无效
真正卡住人的往往不是“该写哪行 CSS”，而是没意识到：图片默认是 inline 元素，它的间距表现取决于三个上下文——自身 display 值、父容器的布局模式（block / flex / grid）、以及是否与文字共存。漏掉其中任一环，margin 就像打在棉花上。
