两个元素视频和图片之间的间隙问题 - HTML & CSS

如何解决两个元素视频和图片之间的间隙问题 - HTML & CSS

我面临一个我无法解决的问题。

在 HTML 和 CSS 中，我插入了一个视频，然后插入了一张图片作为背景并对其进行了格式化。但是，视频和图像之间存在差距（两个元素）。我无法摆脱它。

这里有人有解决方案吗？

感谢您的支持。

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Text</title>
    <link rel="stylesheet" href="Stil.css" />
</head>

<body>
    <div class="Start">

        <h1>TextText</h1>

        <div class="video-player">
            <div class="layer"></div>
            <video autoplay loop muted>
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>

    </div>

    <article class="text">

        
        <section id="highlight">
            <div>
                <header>
                    <p> text,text,text.
                    </p>
        </section>
    </article>
</body>

</html>

CSS 代码：

html {
  color:black;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 14px;
  font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

body {
  margin: 0;
  padding: 0;

}

.Start {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  }
  
  .Start h1 {
    text-align: center;
    color: cornsilk;
    font-size: 10em;
    font-family: "Cookie";
    padding: 0px;
    margin: 0px;
    z-index: 1;
    opacity: 1;
  }
  
  .video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0mm;
  }
  
  .layer{
    position: absolute;
    background-color: rgb(0,0);
    width: 100%;
    height: 100vh;
    opacity: 0.8;
    margin: 0mm;
  }

  .text{
    background-image: url("picture.png");
    background-position: center;
    background-size:cover;
    margin-bottom:0em;
    padding-bottom: 0em;
    padding-top: 0em;
    margin-top: 0em;
    height: 70em;
  }

  section[id="highlight"]{
    font-size: 2em;
    color:white;
    text-align: center;
    line-height: 3em;
    font-style:italic
}

解决方法

section[id="highlight"] {
   overflow:hidden
}

问题可能出在段落标签上，因此您要么使用上面的标签，要么删除段落的顶部边距

section[id="highlight"] p {
     margin-top:0;
}