如图所示
当容器不设置宽高时, 加入 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 中的任意一个都是可以的
