CSS3 vertical-align属性解决图片留白问题

如上图所示， 将一张图片放入一个未设宽高的盒子里， 盒子的高度由图片撑起， 但是底部仍有空隙。

这是因为浏览器文字类型排版存在用于对齐的基线（baseline）， 默认为基线对齐

 上图即为文字基线

 图片默认会与基线对齐

vertical-align用于设置垂直对齐，仅对行内块（img， input，td）及行内元素有效

vertical-align的属性值有：

        1.top ：顶部对齐

        2.bottom： 底部对齐

        3.middle： 居中对齐

        4.baseline：基线对齐 （默认）

        5.具体数值（例如10px）

top、bottom、middle都能解决图片留白问题

如需图片和文字在一个盒子里同时居中对齐， 需要同时设置vertical-align：middle和line-height

使用场景：

1.文本框和表单按钮无法对齐

2.input和img无法对齐问题

3.div中的文本框， 文本框无法贴顶问题

4.div不舍高度由img标签撑开，此时img标签下面会存在额外间隙问题

5.使用line-height让img标签垂直居中问题