图片与文字间距不生效主因是inline元素的margin限制及vertical-align干扰；推荐方案为：1.设img为display:block并加margin；2.用flex布局；3.必须inline时配合vertical-align调整。
文字与图片间距不生效？大概率是 margin 没用对位置，或者被 inline 元素的默认行为干扰了。
为什么 margin 在图片旁的文字上“没反应”
常见现象：给 <img> 加 margin-right: 10px，右边文字没动；或给文字元素（如 <span>）加 margin-left，完全无效。
-
<img>默认是inline元素，和文字在同一行内排布，垂直方向的margin-top/margin-bottom对齐线无作用，水平方向的margin虽生效但容易被父容器的line-height或基线（vertical-align）掩盖 - 纯文字容器（如
<span>、<em>）也是inline，无法直接通过margin控制上下间距，margin-left/margin-right可用，但若前后都是文字，视觉上可能“看不出间隔” - 浮动（
float）或 Flex/Grid 布局下，margin行为会变化，旧写法容易失效
真正可控的三种做法（按推荐顺序）
别硬扛 inline 的限制，换更稳的布局逻辑：
-
把图片设为
display: block+margin：适合图文分块场景（如头像+昵称），margin-bottom立刻生效，再配合text-align居中即可 -
用 Flex 布局包裹图文：父容器加
display: flex; align-items: center;，然后对<img>或文字元素单独设margin-right/margin-left，所有方向都可靠 -
改用
vertical-align配合margin：仅限必须保持inline的场合（如段落内嵌小图标），给<img>加vertical-align: middle;再加margin-left，避免基线错位导致的“空隙忽大忽小”
margin 数值选多少才自然？看字体和图片尺寸
固定写 10px 很容易在不同字号下显得太松或太挤。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 用相对单位：
margin-right: 0.5em（相对于当前文字字号），图片右侧留半字宽，视觉节奏一致 - 图片高度较高时（比如 48px 头像），
margin-right: 0.75em更协调；小图标（16px）用0.25em就够 - 避免混用
px和em：同一组图文间距统一单位，否则响应式缩放时会错乱
最常被忽略的是 vertical-align 和 line-height 的隐式影响——哪怕你只写了 margin，它们也在悄悄调整最终间距。动手前先检查图片是否还在基线对齐，再决定要不要加 vertical-align: top/middle/bottom。
