图片margin失衡主因是单位语义错配：px固定物理尺寸导致小屏显宽、大屏显窄；rem需根字体响应式调整，vw按视口宽计算（上下方向也依宽），%按父宽计算（含上下），em易嵌套失控；img默认inline致垂直margin失效，须设display:block或用flex/vertical-align；须同步控制图片max-width:100%与父容器宽度。
图片边距无法自适应，根本不是 margin 写得不对，而是单位选错了或 display 行为没理清。
为什么 margin: 10px 在手机上显得太宽、在大屏上又太窄
固定像素值（如 10px）在不同设备上物理尺寸不变，但视觉权重会失衡：小屏上 10px 占比高，容易挤压图文流；大屏上则几乎看不见。这不是 bug，是单位语义错配。
- 用
rem：基于根元素字体大小缩放，适合整体节奏统一（比如margin: 1rem 0;），但需确保<html>的font-size本身已响应式调整 - 用
vw：按视口宽度百分比计算（如margin-left: 3vw;），适合全宽图左右留白，注意上下方向的vw值仍按宽度算，非高度 - 用
%：按父容器宽度计算（如margin: 2% 5%;），左右有效，但上下 margin % 也按父宽——这点极易被忽略 - 避免用
em：它继承父元素字体大小，嵌套深时易失控，图文混排中不稳定
img 的 margin-top/margin-bottom 不生效？先看 display
图片默认是 inline 元素，垂直方向的 margin 受限于行高和基线对齐，常“看起来没反应”。这不是浏览器兼容问题，是盒模型行为本身如此。
- 加
display: block;→ 四边margin稳定生效，适合独立展示图、卡片图 - 保持
inline但要调垂直间距 → 改用vertical-align: top;或middle;配合margin微调，适用于图文环绕场景 - 用
flex容器包裹图片 → 容器设align-items: center;，图片无需改display，margin自然可用 - 别碰已废弃的
hspace/vspace属性，现代浏览器完全忽略
响应式图片边距 + 自适应尺寸必须同步处理
只调 margin 却不控图片尺寸，会导致小屏上图片撑破容器、边距被压缩甚至消失。二者必须协同。
立即学习“前端免费学习笔记（深入）”；
- 图片本身加
max-width: 100%; height: auto;，但前提是父容器有明确宽度（比如width: 100%或flex: 1） - 若父容器是
flex项，必须给该容器加min-width: 0;，否则max-width: 100%被忽略，margin也会异常 - 用
srcset+sizes匹配真实显示宽度（如sizes="(max-width: 768px) 100vw, 50vw"），否则加载大图后，margin在高分辨率下视觉比例失真 - 测试时打开 Chrome DevTools → Network → Filter “Large resources”，确认加载的是合适尺寸的图，而非仅靠预览判断
真正卡住人的从来不是“怎么写 margin”，而是没意识到 img 的 display 类型、父容器的宽度来源、以及 margin 单位在不同上下文中的实际计算逻辑——这三者任意一个没对齐，自适应就变成玄学。
