图片上下margin无效是因img默认为inline元素，受line-height和vertical-align:baseline影响；最稳解法是设display:block，图文混排则用vertical-align:bottom或middle。
直接给 <img> 加 margin 是对的，但大概率会“没反应”——不是代码写错了，而是图片默认是 inline 元素，上下边距被行高和基线吃掉了。
为什么 margin-top 和 margin-bottom 看起来无效
浏览器把 <img> 当作文本字符处理，默认 vertical-align: baseline。这个 baseline 不在图片底边，而是在文字 descender（比如字母 g 的下延部分）位置，所以图片下方天然留出一段空白。你加了 margin-bottom: 20px，它确实存在，但视觉上被 baseline 空白“盖住”了。
用开发者工具检查 computed styles，能看到 margin 值已生效，但元素底部到父容器底边的距离仍是 baseline 空白 + margin，而不是单纯的 margin。
- 哪怕设
margin-bottom: 0，空隙还在 - 设负值（如
margin-bottom: -4px）能临时抵消，但换字体、字号或系统就失效 - 左右
margin-left/margin-right通常有效，因为 inline 元素只限制垂直方向
最稳的解法：加 display: block
一句话：只要图片不需要和文字同行显示，就加 display: block。这是让 margin 四边都稳定生效的最低成本操作。
-
img { display: block; margin: 16px auto; }→ 居中 + 上下留白，适合封面图、插图 -
img { display: block; margin-bottom: 24px; }→ 单图后跟段落时，控制与下文距离 - 如果图片在
<p></p>里，加了block后会独占一行，文字自动换行，无需额外处理
图文混排时别硬扛 margin，改用 vertical-align
当图片必须嵌在段落中（比如头像+昵称），保持 inline 或 inline-block，优先调对齐方式：
-
vertical-align: bottom→ 图片底边贴父容器底边，空隙基本消失 -
vertical-align: middle→ 更适合图标+文字组合，再配margin-right: 0.5em分隔文字 - 避免
vertical-align: text-bottom，它仍受字体 descender 影响 - 父容器若还显示文字，别设
line-height: 0，否则文字会被压扁；改用font-size: 0只影响子元素继承，风险更高
多个图片堆一起时小心 margin-collapse
连续几张 display: block 的图片，如果都设了 margin-bottom，相邻两张之间的实际间距不是相加，而是取较大值——这是块级元素上下外边距塌陷（collapse）规则导致的。
- 例如：
img:first-child { margin-bottom: 12px; }+img:last-child { margin-bottom: 20px; }→ 实际间隙是 20px，不是 32px - 想实现等距，统一用：
img:not(:last-child) { margin-bottom: 16px; } - 或者换现代方案：
.gallery { display: flex; flex-direction: column; gap: 16px; }——gap不塌陷，且 IE 以外全支持
真正难的不是写不对 margin，而是忘了先确认 display 和 vertical-align 的当前值。一旦跳过这步，后面所有边距调整都在对抗浏览器默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
