代码如下：
<!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高出几个像素，从而导致底部有黑边？
PHPz2017-04-17 15:00:35
그리고 이 검은색 테두리는 상위 요소 스타일의 background 속성, 특히 background-color 속성 때문인 것 같습니다. 원인은 솔직히 잘 모르겠습니다. ...
현재 그 이유는 동영상의 기본 표시가 인라인이기 때문일 수 있다고 추측됩니다.
따라서 해결책은 다음과 같습니다.
플러스 font-size: 0;
속성을 제거하세요. background/background-color
에 <video> 스타일을 추가합니다. display: block;
阿神2017-04-17 15:00:35
부모 요소 videoContainer에는 높이가 없으므로 <video>에서 contorl 속성을 사용하면 검은색 테두리가 나타납니다.
**해결책:
1. 제어 속성을 삭제합니다.
2. 상위 요소 높이를 지정하거나 패딩을 사용하여 펼치는 등 **
