代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.videoContainer {
width: 70%;
height: auto;
background: #000;
}
</style>
</head>
<body>
<p class="videoContainer" >
<video id="myVideo" controls preload="auto" width="100%" height="100%" >
<source src="test.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</p>
</body>
</html>
最终的显示效果：
我的疑惑是：为什么父元素p会比video高出几个像素，从而导致底部有黑边？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In addition, it seems that this black border is due to the
backgroundattribute in the parent element style, specifically thebackground-colorattribute. As for the cause,To be honest, I don’t know...Currently it is speculated that the reason may be related to the default display of video being inline.
So the solution should be:
plus
font-size: 0;;Remove the
background/background-colorattribute;adds
<video>style todisplay: block;.Because your parent element videoContainer has no height, when <video> uses the contorl attribute, a black border will appear.
**Solution:
1. Delete the contorl attribute
2. Give the parent element height, or use padding to spread it, etc. **
Actually, this is an HTML bug, and it will be normal if the font size of the parent is set to 0. .