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.piao2010.com/wenda/test.mp4' type='video/mp4' /> <p>Your browser does not support the video tag.</p> </video></p></body> </html>
最終的顯示效果：
我的疑惑是：為什么父元素p會比video高出幾個像素，從而導(dǎo)致底部有黑邊？
問題解答
回答1：補(bǔ)充下，貌似這個黑邊是因?yàn)楦冈貥邮嚼镉辛薭ackground屬性，具體來說是background-color這個屬性，至于成因是什么，實(shí)話講我也不知道……
目前猜測原因可能是和video默認(rèn)的display是inline有關(guān)系。
所以解決方案應(yīng)該是：
加上font-size: 0;；
去掉background/background-color屬性；
給<video>加上display: block;樣式。
回答2：因?yàn)槟愕母冈豽ideoContainer沒有高度，當(dāng)<video>使用了contorl屬性的時候，就會出現(xiàn)一個黑邊。**解決方法：1、刪掉contorl屬性 2、給父元素高度，或者用padding撐開等**
回答3：其實(shí)這是一個html的bug，父級的font size設(shè)為0就正常了。。
相關(guān)文章：
1. linux - 編譯時提示頭文件#include <mysql/mysql.h>不存在,百度之后也沒解決2. python - openpyxl讀取xlsx文件把數(shù)據(jù)生成字典，中文編碼問題？3. node.js - mac下vue-cli構(gòu)建的項(xiàng)目為啥在windows就報錯呢？4. python - beautifulsoup獲取網(wǎng)頁內(nèi)容的問題5. mysql主從復(fù)制 REPLICATE_DO_DB 參數(shù)從服務(wù)器reboot后每次都回滾為初始設(shè)置6. mysql索引 - mysql的表如何重新組織（或生成）索引？7. python小白的基礎(chǔ)問題 關(guān)于while循環(huán)的嵌套8. 設(shè)置 mysql 的 root用戶 可以被外網(wǎng)訪問后的問題9. django - Python error: [Errno 99] Cannot assign requested address10. python - linux怎么在每天的凌晨2點(diǎn)執(zhí)行一次這個log.py文件
網(wǎng)公網(wǎng)安備