zoukankan      html  css  js  c++  java
  • 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左右;
  • 相关阅读:
    ➡️➡️➡️IELTS reading by Simon on Bili
    lc0502
    lc0331
    lc0329
    lc0327
    lc0326
    lc0324
    lc0320
    lc0319
    lc0316
  • 原文地址:https://www.cnblogs.com/sunala/p/7064581.html
Copyright © 2011-2022 走看看