代码如下：
<!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 フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
また、この黒枠は親要素のスタイルの
background属性、具体的にはbackground-color属性によるものと思われますが、原因については正直分かりません。 ...現時点では、その理由はビデオのデフォルト表示がインラインであることに関連しているのではないかと推測されています。
したがって、解決策は次のようになります:
プラス
;font-size: 0;属性を削除します。
はbackground/background-color<video>display: block;親要素 videoContainer には高さがないため、<video> が control 属性を使用すると、黒い境界線が表示されます。
**解決策:
1. control 属性を削除します。
2. 親要素に高さを与えるか、パディングを使用して広げます。 **
実はこれはHTMLのバグで、親のフォントサイズを0にすれば正常になります。 。