图片列表用inline-block时底部留白源于基线对齐，解决方法是给img加vertical-align: top/bottom/middle；若用flex布局则天然无此空白，且更适配响应式。
图片列表用 display: inline-block 时底部留白怎么去掉
默认情况下，<img> 是行内元素，设为 inline-block 后会和文字一样对齐基线（baseline），导致下方出现几像素空白。这不是 bug，是 CSS 渲染行为。
- 最直接的解法：给
<img>加vertical-align: middle或top或bottom - 避免用
font-size: 0父容器 hack——它会影响子元素内文字，不干净 - 如果父容器是 flex 布局，这个空白根本不会出现，但要注意老浏览器兼容性（IE10+ 支持
flex）
用 flex 实现等宽图片列表且自动换行
适合响应式场景，比如商品图墙、相册缩略图。关键不是“让图片等宽”，而是控制容器如何分配空间。
- 父容器设
display: flex+flex-wrap: wrap - 每个图片外层用
<div>包裹（避免直接对<img>设flex属性），设flex: 0 0 calc(33.333% - 8px)（三列，含间距） - 图片本身加
width: 100%+height: auto，防止拉伸变形 - 注意：IE10/11 对
flex-wrap支持弱，若需兼容，建议降级为display: inline-block方案
Grid 布局下图片高度不一致导致错位怎么办
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 很好用，但每张图高度不同会让网格行高参差——视觉上“没对齐”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 解决思路不是统一图片尺寸，而是统一网格轨道高度：
grid-auto-rows: 150px（固定行高） - 更稳妥的做法：给图片容器设
overflow: hidden+height: 100%，再让图片object-fit: cover - 别用
align-items: stretch强撑高度——它会让图片被拉变形 - 注意：
object-fit在 IE 完全不支持，如需兼容，只能预处理图片或 JS 补充裁剪
移动端图片列表左右边距不对称？检查 box-sizing 和父容器 padding
常见现象：PC 看正常，手机上看最左和最右图片贴边，中间有间隙。根源常在盒模型和视口宽度计算偏差。
立即学习“前端免费学习笔记（深入）”；
- 确保所有图片容器设
box-sizing: border-box（尤其当加了padding或border） - 父容器不要只靠
margin: 0 auto居中——要配合max-width和width: 100% - 如果用
vw单位算列宽（如calc(33.333vw - 12px)），注意 viewport 缩放或 Safari 地址栏隐藏会导致vw动态变化，造成抖动 - 真机调试时，打开 Safari 的「显示渲染边界」能快速定位是否是滚动条占位或 overscroll 行为干扰布局
实际项目里，flex 方案写起来快、语义清晰，但 Grid 在复杂对齐（比如首行居中、最后一行左对齐）时更可控。不过只要图片源尺寸差异大，光靠 CSS 很难彻底规避裁剪或留白——这时候得和设计/后端约定输出规格，或者加一层懒加载时的尺寸预设逻辑。
