audio標簽下會與相鄰標簽產生空隙，如圖所示

原因：

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

解決方法：

設置audio的vertical-align屬性為bottom；

設置父元素font-size屬性為0；

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

轉載于:https://www.cnblogs.com/sunala/p/7064581.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。