处理图片底部间隙问题

如图所示

当容器不设置宽高时, 加入 img 标签后会自动撑开
那么问题来了, 为什么图片底部为什么会有一点间隙而不是100%填充容器呢?
其实间隙产生的三大元凶是 “幽灵空白节点”、line-height 和 vertical-align 属性
幽灵空白节点 即: 一个宽度为0, 体现好像普通字符的看不见的 “节点”
我们插入一个内容为 “x”, 背景为红色的 “span” 标签 (图片左下角)
可以发现, 图片的底部是和 “x” 的基线对齐的, 这也是行内元素的默认对齐方式

• 处理方法有很多, 比方
  • 图片块状化. 可以一口气干掉 “幽灵空白节点”、line-height 和 vertical-align
  • 容器 line-height 足够小. 只需半行间距小到字母x的下边缘位置或者者再往上, 自然就没有了撑开底部间隙高度空间了. 比方: 容器设置 line-height: 0;
  • 容器 font-size 足够小. 此方法要想生效, 需要容器的 line-height 属性值和当前 font-size 相关, 如 line-height: 1.5; 或者者 line-height: 150% 之类; 否则只会让下面的间隙变得更大, 由于基线位置因字符x变小而往上升了
  • 图片设置其余 vertical-align 属性值. 间隙的产生起因之一就是基线对齐, 所以我们设置 vertical-align 的值为 top、middle、bottom 中的任意一个都是可以的