图片默认 inline 导致底部约 4px 空白，主因是基线对齐；应设 img { display: block; } 或 vertical-align: top 解决，max-width: 100% 仅防溢出，不消除空白。
图片默认是 inline 元素，会留出底部空白
这是最常见原因：<img alt="css 图片边距撑开父元素怎么办_display block 与 max-width 控制" > 默认 display: inline，浏览器会按基线（baseline）对齐，为字母下延部分（如 g、y、p）预留空间，导致图片下方出现约 4px 的空白，视觉上像“撑开”了父容器。
解决方式不是靠 max-width，而是先消除这个内联行为本身：
-
img { display: block; }—— 最直接，去掉行内对齐逻辑 -
img { vertical-align: top; }或middle或bottom—— 调整对齐基准，top通常最稳 - 父元素设
font-size: 0;，再在 img 上重设字体大小（不常用，适合复杂内联布局）
max-width: 100% 不解决边距问题，但防溢出
max-width: 100% 的作用是让图片在父容器变窄时不超出，但它不控制外边距、内边距或对齐产生的空白。如果父元素高度异常，大概率不是宽度问题，而是上面说的 inline 基线问题。
典型误用场景：
立即学习“前端免费学习笔记（深入）”；
- 给
img加了max-width: 100%; height: auto;，但父容器仍有额外高度 → 检查是否漏了display: block - 父元素用了
padding或border，又没设box-sizing: border-box→ 高度被撑大是正常盒模型行为，和图片类型无关 - 图片外层套了
<a></a>或<span></span>等 inline 容器，且没处理其内部对齐 → 问题可能在包裹元素，而非img本身
flex / grid 布局下图片撑高？检查 align-items
当父容器是 display: flex，默认 align-items: stretch，若子项（如图片）没设高度，又没内容撑开，有时会因 flex 项默认基线对齐而表现异常。
建议统一处理：
- 父容器加
align-items: flex-start;（避免拉伸） - 或给图片加
align-self: flex-start; - 更稳妥：仍配合
display: block;，双重保险
Grid 布局同理，align-items 或 justify-items 的默认值也可能引入意外空间。
实际推荐写法（兼顾响应与布局稳定）
多数现代项目中，一个可靠、简洁的图片样式组合是：
img {
display: block;
max-width: 100%;
height: auto;
}
如果需要居中，不要依赖 text-align: center（对 inline 有效，但已设 block 就失效），改用：
- 父容器
text-align: center;（兼容老浏览器） - 或父容器
display: flex; justify-content: center; - 或图片加
margin: 0 auto;（需确保是块级且有宽度约束）
真正容易被忽略的是：哪怕只在一个地方忘了 display: block，整个卡片/列表的高度就可能错一两像素——这种问题在 CSS Grid + 图片混排时尤其隐蔽。
