audio标签下方有空隙的原因与解决方法

audio标签下会与相邻标签产生空隙，如图所示

原因：

         块级元素包含内联元素时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font有关会随父级元素的font-size变化而变化），所以会出现如图所示间隙，这是因为audio与父元素的底边有距离（当然这里不光audio会产生空隙）。说到baseline呢，其实它是vertical-align属性的默认值，vertical-align属性是设置元素的垂直排列的，用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

解决方法：

1. 设置audio的vertical-align属性为bottom；
2. 设置父元素font-size属性为0；
3. 设置父元素line-height属性为5px左右；