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='https://www.haobala.com/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有关系。
所以解决方案应该是：
加上font-size: 0;；
去掉background/background-color属性；
给<video>加上display: block;样式。
回答2：因为你的父元素videoContainer没有高度，当<video>使用了contorl属性的时候，就会出现一个黑边。**解决方法：1、删掉contorl属性 2、给父元素高度，或者用padding撑开等**
回答3：其实这是一个html的bug，父级的font size设为0就正常了。。
相关文章：
1. Android中能不能判断一个数据库是create来的，还是open来的？2. Android Studio 中 xUtils 3.0 替换 2.0 的时候总报找不到 jar 包是什么原因？3. java - String s=new String()与String s = ""的区别4. javascript - vue-router怎么不能实现跳转呢5. css3 - 一个关于CSS雪碧图的问题6. 为什么php修改数据无法同步到数据库，只是当前页面修改成功？7. docker Toolbox在win10 家庭版中打开报错8. angular.js - angular获取radio选项的值，在线等啊亲，连续加班一个礼拜了……9. java - 如何写一个intellij-idea插件，实现编译时修改源代码的目的10. node.js - mysql如何通过knex查询今天和七天内的汇总数据
网公网安备