vertical-align : baseline(默认) | top | middle | bottom
vertical-align 属性设置元素的垂直对齐方式。
baseline : 基线
top : 顶线
middle : 中线
bottom : 底线
使用场景：
1.设置图片或表单（行内块元素）和文字对齐
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a>img{vertical-align: baseline;}.b>img{vertical-align: top;}.c>img{vertical-align: middle;}.d>img{vertical-align: bottom;}</style></head><body><div class="a"><img src="img/head-ing.png" alt="">发现生活</div><div class="b"><img src="img/head-ing.png" alt="">发现生活</div><div class="c"><img src="img/head-ing.png" alt="">发现生活</div><div class="d"><img src="img/head-ing.png" alt="">发现生活</div></body></html>
2.消除图片底部缝隙
从上面的例子中我们可以看到，当图片的 vertical-align 的值是 baseline 时图片和图片之间有缝隙，这是为了给文字留位置，就算没有文字因为基线对齐是默认值，缝隙也存在。
解决方法：1.给图片添加 vertical-align 除默认值以外的值。
2.将图片转换为块级元素
