需让文本紧贴图片，已设0边距仍有空白，是否与display布局有关

反复设置margin、padding都消不掉的图片下方空白，和flex布局、块级显示设置、边距都没有关系，核心原因是：

• <img>是默认inline类型的替换元素，inline元素默认按文字基线（baseline）对齐，图片底部会永久预留出给文字下伸部分留的空隙，这个空隙不属于margin/padding范畴，所以全局清空边距的操作对它完全无效。
• 你给.caption设置的display:block本身没有问题，但是这个空隙是img自带的对齐规则造成的，不是caption的边距导致的，所以改caption的样式自然消不掉空隙。
• 你在header上使用的flex布局只作用于header内部的子元素，完全不会影响到下方.container里的item区域内容，和这个空隙问题无关。

不需要给span.caption额外包裹div，任选一种方式修改img的样式即可立刻消除间隙：

1. 最稳妥的方案：将img从inline元素改为块级元素，彻底废除inline对齐规则

   img {
       /* 原有样式全部保留，新增display:block即可 */
       display: block;
       width: 100%;
       height: 100%;
       border-top-left-radius: 3%;
       border-top-right-radius: 3%;
   }
   

2. 不想修改img的display属性时，直接修正img的垂直对齐值，让它从基线对齐改为贴底对齐：

   img {
       /* 新增垂直对齐规则，其余样式不变 */
       vertical-align: bottom;
       width: 100%;
       height: 100%;
       border-top-left-radius: 3%;
       border-top-right-radius: 3%;
   }
   

3. 特殊场景需要保留img inline属性时，给父级.item设置font-size:0，把inline元素附带的文字空隙压到0，之后单独给.caption设置回正常的字号即可。这个方案不如前两种直观，不推荐优先使用。

• 你已经给.caption设置了display:block，块级元素会自动和上方修正对齐后的img无缝衔接，完全不需要额外套div包裹文本
• 你全局配置* {margin:0; padding:0}的操作没有问题，只是这个空隙本身不是边距造成的，所以之前的操作没有生效
• 你给.item设置的vertical-align:top是控制多个item横向排列时的自身对齐位置，和item内部img的对齐规则没有关系，不会影响间隙的产生

内容的提问来源于stack exchange，提问作者ZUPPA LOL