css - 為什么video不能填滿整個父級div？底部有黑邊？
問題描述
代碼如下：
<!DOCTYPE html> <html> <head> <title>Demo</title> <style>.videoContainer { width: 70%; height: auto; background: #000;}</style></head> <body> <p > <video controls preload='auto' > <source src='http://m.lshqa.cn/wenda/test.mp4' type='video/mp4' /> <p>Your browser does not support the video tag.</p> </video></p></body> </html>
最終的顯示效果：
我的疑惑是：為什么父元素p會比video高出幾個像素，從而導致底部有黑邊？
問題解答
回答1：補充下，貌似這個黑邊是因為父元素樣式里有了background屬性，具體來說是background-color這個屬性，至于成因是什么，實話講我也不知道……
目前猜測原因可能是和video默認的display是inline有關(guān)系。
所以解決方案應該是：
加上font-size: 0;；
去掉background/background-color屬性；
給<video>加上display: block;樣式。
回答2：因為你的父元素videoContainer沒有高度，當<video>使用了contorl屬性的時候，就會出現(xiàn)一個黑邊。**解決方法：1、刪掉contorl屬性 2、給父元素高度，或者用padding撐開等**
回答3：其實這是一個html的bug，父級的font size設(shè)為0就正常了。。
相關(guān)文章：
1. java中返回一個對象，和輸出對像的值，意義在哪兒2. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？3. python - pandas dataframe如何對某列的空數(shù)據(jù)位置進行update？update的函數(shù)是自定義的，參數(shù)是同一行的另外兩列數(shù)據(jù)4. docker網(wǎng)絡(luò)端口映射，沒有方便點的操作方法么？5. docker start -a dockername 老是卡住，什么情況？6. css3 - 純css實現(xiàn)點擊特效7. apache web server 怎么限制某一個網(wǎng)站對服務器資源的占用？8. javascript - 關(guān)于apply（）與call（）的問題9. 安全性測試 - nodejs中如何防m(xù)ySQL注入10. html5 - 請問現(xiàn)在主流的前端自動化構(gòu)建工具是哪個？
網(wǎng)公網(wǎng)安備