【HTML】【CSS】图片下方的空白

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

图片下方有空白？

在撰写HTML时，当我们使用<img>这个HTML标签时，会发现图片下方会有大约4px左右的距离
在背景为白色的时候不太明显，我们将背景背景替换来看看：
https://codepen.io/linchinhsuan/pen/mdqoJKa
从这个案例我们可以看到图片底部出现一个小留白区域（因此我们才看得到红色背景）

那为什麽会有这段空白呢？
因为<img>的display属性默认是inline-bolck，而这个属性的vertical-align的默认值是baseline
当vertical-align的值为baseline时会让文字和其父元素的基（准）线对齐
目的是因为英文中像是小写 g j p q y，会超出基线以下，因此必须预留一段空间给这些会在基线以下的字
然而，<img>图片因为vertical-align的值为baseline
所以它只会在基线上，因此当<img>和文字并排时，图片底部就会出现一个小留白区域

可以将范例中的注解打开，我将font-size调整为100px，此时就会发现图片下方的空间变大了

span{
  font-size: 100px;
}

原因也不难理解，因为文字变大，基线以下的空间当然也变大（前面所说的4px，是因为网页预设的字体大小为16px的缘故）

到此，大致理解了为何会有这个留白区域

解决方案

范例：https://codepen.io/linchinhsuan/pen/ZEaPGPe

解法1：将<img>的vertical-align设置为其他

因为问题是出在<img>的vertical-align的值为baseline的缘故
因此只要将<img>的vertical-align设置为middle就可解决

img{
  vertical-align: middle;
}

解法2：直接将<img>改变的display属性

由於vertical-align适用於display属性值为inline、inline-bolck、table-cell 的元素
而<img>图片本身会有一个display: inline-bolck属性，如果破坏这个特性即可解决图片下方空白的问题
例如：

img{
  display: block;
}

或是：

.bg-red{
  display: flex;
}

在外层下display: flex;让<img>变成flex-item，同样可以解决问题