audio標(biāo)簽下會與相鄰標(biāo)簽產(chǎn)生空隙，如圖所示

原因：

???????? 塊級元素包含內(nèi)聯(lián)元素時，內(nèi)聯(lián)元素默認(rèn)是和父級元素的baseline（基線）對齊的，而baseline又和父級元素底邊有一定的距離（這個距離和font有關(guān)會隨父級元素的font-size變化而變化），所以會出現(xiàn)如圖所示間隙，這是因為audio與父元素的底邊有距離（當(dāng)然這里不光audio會產(chǎn)生空隙）。說到baseline呢，其實它是vertical-align屬性的默認(rèn)值，vertical-align屬性是設(shè)置元素的垂直排列的，用來定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。

解決方法：

設(shè)置audio的vertical-align屬性為bottom；

設(shè)置父元素font-size屬性為0；

設(shè)置父元素line-height屬性為5px左右；

轉(zhuǎn)載于:https://www.cnblogs.com/sunala/p/7064581.html

總結(jié)

以上是生活随笔為你收集整理的audio标签下方有空隙的原因与解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。