图片上下空隙源于其默认 inline 特性受 line-height 和 vertical-align 影响，margin-top/bottom 并非无效而是不推挤相邻元素；解决需改 display: block、调整 vertical-align 或用 flex/grid 布局。
图片上下空隙不是“没设 margin”，而是它默认是 inline 元素，受 line-height 和 vertical-align 拉扯导致的——直接写 margin-top 或 margin-bottom 常常看起来没反应。
为什么 margin-top 和 margin-bottom 对 <img> 无效
浏览器把 <img> 当作 inline 元素处理，它的垂直方向位置由父容器的 line-height 和自身的 vertical-align（默认 baseline）共同决定。此时 margin-top/margin-bottom 确实存在，但被包裹在行框（line box）里，不推挤相邻元素，只影响自身在行内的“悬浮高度”。所以你调了，页面看起来毫无变化。
- 用开发者工具检查，能看到
margin值已生效，但上下空白依然顽固 - 父容器若没设
font-size: 0或line-height: 0，空白就更明显 - 哪怕给
<img>加display: inline-block，只要vertical-align还是baseline，底部仍会留出文字下降部（descender）空间
真正管用的三种垂直间距控制法
别硬调 margin，先改渲染模式或对齐基准：
-
最稳：加
display: block—— 图片脱离行内流，margin-top/margin-bottom立刻四平八稳，适合单图、全宽图、背景图等不需要文字环绕的场景 -
混排必备：改
vertical-align—— 保持inline或inline-block，显式设vertical-align: middle或top/bottom，再配合margin微调。注意：必须同时控制父容器的line-height（比如设为1或0）才干净 -
现代布局优先：用
display: flex或display: grid—— 把图片放进弹性或网格容器，用align-items: center或justify-content: center控制垂直位置，完全绕开 inline 的坑
line-height 是隐藏的垂直间距开关
即使你没写 line-height，浏览器也会给包含图片的行框一个默认值（通常是字体大小的 1.2 倍左右）。这个值越大，图片上下“可活动”的空间越宽松，视觉空隙就越明显。
- 想彻底消灭多余空隙：给图片的**直接父容器**设
line-height: 0（尤其适用于<picture></picture>包裹<img>的响应式图场景） - 若父容器还要显示文字，不能清零
line-height，那就把图片提出来单独设display: block，文字另起一层 - 慎用
font-size: 0消空白——虽有效，但会干扰子元素继承，不如从 display 或 vertical-align 入手
真正难的不是“怎么加空隙”，而是意识到：图片的垂直间距本质是它在行框里的定位问题，不是边距本身失效。一旦忘了 display: block 或 vertical-align 这层，后面所有 margin 调整都在和浏览器默认行为对抗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
