图片margin-bottom“没反应”的根本原因是其默认为inline元素，受line-height和baseline影响；解决方法是设display: block或用vertical-align调整对齐。
margin-bottom 能设，但经常“没反应”——根本原因不是写错了值，而是图片默认是 inline 元素，它的 margin-bottom 会被行高（line-height）和基线（baseline）吃掉。
为什么 margin-bottom 加了却看不到效果
浏览器把 <img> 当作文本字符处理，默认对齐方式是 vertical-align: baseline。这个 baseline 并不在图片底边，而是在文字底部预留的 descender 区域（比如字母 g、y 的下延部分），所以图片下方天然留出一段“看不见的空隙”，此时再加 margin-bottom，视觉上还是被压在同一个基准线上，看起来就像没生效。
- 用开发者工具检查，会发现图片盒模型底部确实有 margin，但它和父容器底边之间还隔着那段 baseline 空隙
- 哪怕设
margin-bottom: 0，空隙依然存在；设负值（如margin-bottom: -5px）能抵消，但不稳健——换字体或字号就可能失效 - 该问题在单张图独立居中、图文混排、多图并列等场景都会出现，不是 bug，是 inline 元素的固有行为
display: block 是最直接有效的解法
把图片从行内流中抽出来，让它成为块级元素，margin-bottom 就能按预期推远后续内容。
- 只需一行 CSS：
img { display: block; margin-bottom: 24px; } - 若图片需居中，搭配
margin: 24px auto;即可，auto水平居中只对block生效 - 注意：设为
block后，图片不再和文字同行显示，如果要图文混排，得改用float或vertical-align配合
图文混排时用 vertical-align 替代 margin-bottom
当图片必须保持 inline（比如嵌在段落中），margin-bottom 不可靠，优先调 vertical-align 改变对齐基准。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: bottom：让图片底边贴父容器底边，空隙消失 -
vertical-align: middle：常用于头像+文字组合，比baseline更稳，再配小量margin-right分隔文字即可 - 避免用
vertical-align: text-bottom，它仍受字体 descender 影响，不如bottom彻底 - 不要同时滥用
margin-bottom和vertical-align，容易互相干扰，先清空所有 margin 再调对齐
多个图片堆叠时小心外边距塌陷
连续几张 display: block 的图片，若都设了 margin-bottom，相邻两张之间的间距不是两者之和，而是取较大值——这是块级元素上下 margin 塌陷（collapse）规则导致的。
- 例如：
img:nth-child(1) { margin-bottom: 16px; }，img:nth-child(2) { margin-bottom: 24px; }，实际间隙是 24px，不是 40px - 想实现等距，统一只给除最后一张外的所有图片设
margin-bottom，或者改用gap（需父容器是flex或grid） - 用
padding-bottom代替margin-bottom也能绕过塌陷，但语义上它是“图片自身内部留白”，不是“与下个元素的距离”
真正难的不是写哪行 CSS，而是判断当前布局里图片是否该保持 inline ——一旦选错模式，后面所有 margin 调整都在补救，而不是设计。
