search

Home  >  Q&A  >  body text

css - 为什么video不能填满整个父级div？底部有黑边？

代码如下：

<!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高出几个像素，从而导致底部有黑边？

PHP中文网PHP中文网2863 days ago929

reply all(3)I'll reply

  • PHPz

    PHPz2017-04-17 15:00:35

    In addition, it seems that this black border is due to the background attribute in the parent element style, specifically the background-color attribute. 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:

    1. plus font-size: 0;;

    2. Remove the background/background-color attribute;

    3. adds <video> style to display: block;.

    reply
    0
  • 阿神

    阿神2017-04-17 15:00:35

    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. **

    reply
    0
  • 阿神

    阿神2017-04-17 15:00:35

    Actually, this is an HTML bug, and it will be normal if the font size of the parent is set to 0. .

    reply
    0
  • Cancelreply