CSS：vertical-align属性应用 - 解决图片底部默认空白间隙问题

问题

问题：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

例如：

可以看出：图片的底部和div的边框之间有一个空白缝隙：

之所以会产生缝隙，是因为图片默认是和文字的基线（不是底线）对齐的。

解决法案

方案一：给图片添加vertical-align: middle | top | bottom等

这种方法推荐使用。

底线对齐

中间对齐

顶端对齐

方案二：把图片转换为块级元素display: block;