Flex布局下图片无法贴合父元素顶部，如何消除顶部空白？

常见原因及解决方法 #

• 图片行内元素特性导致的对齐空白
  图片默认是行内替换元素，会和文本基线对齐，进而产生顶部/底部间隙。给图片添加样式：display: block; 或者 vertical-align: top; 即可消除这个间隙。
• 容器或父元素的默认内边距/外边距
  检查你的Flex布局外层容器、图片的直接父元素，是否存在padding-top或margin-top值，将这些值设置为0即可。
• 图片自身带空白区域
  打开'Test'图片，确认原图片顶部是否存在透明空白像素，若有，用图片编辑工具裁剪掉多余区域即可。
• Flex容器交叉轴对齐方式问题
  如果Flex容器设置了align-items: center或其他非flex-start的对齐值，会使项目在交叉轴上居中，造成顶部空白。将容器的align-items属性设为flex-start，让项目贴紧容器顶部。

调试技巧 #

1. 打开浏览器开发者工具（按F12），选中图片元素，查看盒模型面板，确认margin、padding、border是否有额外数值，定位间距来源。
2. 给图片临时添加border: 1px solid red;样式，直观看到图片的实际占位范围，判断空白是布局问题还是图片自身问题。
3. 检查Flex容器及所有父元素的样式，排查是否有继承的间距相关样式。

内容的提问来源于stack exchange，提问作者Adrien G.