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左右;
原文地址:https://www.cnblogs.com/sunala/p/7064581.html