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. 微信公众号发送模板消息返回错误410002. 这是什么情况？？？3. css - 手机浏览器的兼容问题，微信和其它下载的浏览器打开没有问题，谷歌也测试过，就是手机自带的浏览器有问题。4. Android明明可以直接分享，为什么还要用微信开放平台、微博开放平台的sdk？5. javascript - 单页面应用怎么监听ios微信返回键？6. angular.js - 在ionic下，利用javascript导入百度地图，pc端可以显示，移动端无法显示7. bootstrap的col左右布局不生效在谷歌浏览器不生效8. node.js - nojs的response.write()如何返回一个html9. css - input中transition 设置background-color过渡，chrome浏览器页面初始化渲染会有过度效果10. node.js - JavaScript的一个不能理解的地方
网公网安备