百分比 margin 的计算基准始终是父元素宽度，与方向无关；img 需设 display: block 才使上下 margin 可靠生效，否则受 inline 特性影响易失效。
直接用 margin 的百分比值就能设，但必须清楚它参照的是父容器的宽度，不是图片自身尺寸，也不是父容器高度——这点不注意，上下边距会“看起来没反应”或撑得离谱。
为什么 margin-top: 10% 有时像没生效？
因为 img 默认是 inline 元素，受行高和基线影响，垂直方向的 margin 在某些布局中会被忽略或压缩。更关键的是：百分比 margin 的计算基准统一是父元素的 width，哪怕你写的是 margin-top 或 margin-bottom。
- 父容器宽 400px →
margin-top: 10%实际是 40px，但若父容器高度只有 200px，这个 40px 就可能把图片顶出可视区 - 如果图片在
flex或grid容器里，margin百分比依然按父宽算，但布局行为可能掩盖了效果 - 想让上下边距“视觉上等比”，建议改用
padding包裹容器，或用transform: translateY(10%)做相对位移（但那是位移，不是真实边距）
img 设 display: block 后百分比 margin 才可靠
这是最常被跳过的一步。不加这句，margin 百分比在垂直方向容易失效或表现飘忽。
- 加
display: block后，img成为块级元素，margin-top/margin-bottom才真正参与文档流计算 - 示例：
img { display: block; margin: 5% 10%; }表示上下 5%（基于父宽），左右 10% - 若需响应式留白又怕小屏溢出，可配合媒体查询：
@media (max-width: 768px) { img { margin: 2% 5%; } }
替代方案：用容器 padding 控制图片“视觉边距”
当百分比 margin 因父容器宽高比失衡而难控时，把图片包一层 div，对容器设 padding 更稳。
立即学习“前端免费学习笔记（深入）”；
-
padding百分比也按父宽算，但它作用在内容区内部，不会引发外边距合并（margin collapse） - 代码结构：
<div class="img-wrapper"><img src="a.jpg"></div>
+.img-wrapper { padding: 8% 12%; } img { display: block; width: 100%; height: auto; } - 注意：
padding不能设负值，也不支持auto，灵活性不如margin，但胜在 predictable
百分比边距本质是“按父宽缩放的固定偏移”，不是真正的响应式比例控制；真要让图片间距随屏幕高度变化，得靠 JS 动态计算，或改用 vh/vmin 单位——但那就脱离了纯 CSS 百分比的范畴了。
