用 margin 控制图片与文字左右间距最直接：左浮动用 margin-right 推右文，右浮动用 margin-left 推左文；行内混排时 vertical-align + margin 更可控；现代布局优先 flex，gap 管间距、align-items 管对齐。
用 margin 控制图片与文字的左右间距最直接
浮动图片（float: left 或 float: right）时，文字会紧贴图片边缘，这是默认行为。真正起作用的是 margin，不是 padding 或 gap——因为 padding 作用于图片自身内边距，不影响文字流；gap 只在 flex/grid 容器里生效，对普通文档流无效。
常见错误是只加 margin-left 却没考虑浮动方向：左浮动图片要靠 margin-right 推开右侧文字；右浮动则用 margin-left 推开左侧文字。
-
margin-right: 1rem是推荐起点，视觉上舒适且响应友好 - 避免用
px固定值（如12px），小屏下易显得过宽 - 不要给浮动图片设
margin-bottom试图“拉开下文”——它对后续块级元素（如<p></p>）基本无效，得靠清除浮动或后续元素的margin-top
不用 float 时，vertical-align + margin 更可控
当图片作为行内元素（默认）和文字混排，比如 <span><img></span>，vertical-align 决定上下对齐基准线，而 margin 负责水平留白。这时 vertical-align: middle 通常比 top 或 baseline 更符合直觉，尤其配等高字体时。
注意：vertical-align 对块级容器（如 <div> 包裹的 <code><img>）完全无效，只作用于行内级或表格单元格内容。
- 必须配合
display: inline-block才能让vertical-align在非图片元素上生效 -
margin-right值建议用0.5em～1em，随字号缩放，比rem更贴合行内节奏 - 若文字换行后图片“悬空”，大概率是
line-height过大导致基线偏移，优先调line-height而非猛增margin
现代布局下，flex 是唯一能同时管齐“距离+对齐+响应”的方案
如果图片和文字属于同一逻辑组（比如头像+简介、图标+说明），别硬套浮动或行内技巧，直接用 display: flex。它天然隔离内外间距：gap 控制元素间空隙，align-items 管垂直对齐，margin 可继续用于外部留白。
关键点在于：flex 容器内的图片不再参与文本流，所以不会出现“文字绕图”效果——这反而是优势，避免浮动带来的清除问题和不可预测的折行。
-
gap: 1rem比分别写margin-right更简洁，且自动适配多元素 - 容器加
flex-wrap: wrap后，小屏下图片可自动换行，文字不再被挤出视口 - 慎用
justify-content: space-between配合单张图片——会导致图片被拉到最左/右，失去“图文并列”语义
容易被忽略的兼容性细节
所有方案都依赖 CSS 盒模型，但浏览器对 img 默认 display 值的处理有差异：Chrome/Firefox 默认是 inline，Safari 旧版曾返回 inline-block。这意味着不显式声明 display 时，margin-bottom 在某些场景下可能表现不一致。
更隐蔽的问题是图片加载失败时的占位行为：alt 文本会继承父元素的 line-height 和 vertical-align，若未设 font-size: 0 或 line-height: 0，可能撑高容器造成意外空白。
- 始终为
<img>显式设置display: block或display: inline-block，消除歧义 - 用
max-width: 100%配合height: auto防止图片溢出容器，否则margin再精准也白搭 - 在 CSS 重置中加入
img { vertical-align: middle; }，比每处都写更省事
