Баннер и верхняя часть страницы имеют пустое пространство между - PullRequest
Новая
       11

Баннер и верхняя часть страницы имеют пустое пространство между

0 голосов
/ 18 февраля 2020

это пространство между прозрачным баннером и верхней частью страницы. все поля и отступы были установлены на 0. Я не знаю, что я делаю неправильно, какие-либо идеи?

image: https://imgur.com/a/XQMsOVT

Кузов: 

<video autoplay muted loop id="myVideo">
  <source src="sparkle.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>



        <div class="hero-image" >
            <h1 align="center" style="color:white; font-size:50px; font-family:Sofia;">Sparkle</h1>
        </div>

        <div id="ok">
            <H1 style="padding:0; margin:0; overflow:hidden;" align="center"> </h1>
        </div >
    <p style="position:relative;"> okok <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>  <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> okoks </p>

css: 

body, html {
  margin: 0px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
  font-family: Arial, Helvetica, sans-serif;


  background-repeat:no-repeat;
  background-size:cover;
}

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index:-10
}



.hero-image {
  overflow:scroll
  margin:0;
  top:0;
  width: 100vw;
  position: sticky;
  background-color: rgba(0, 0, 0, 0.3);
}

1 Ответ

0 голосов
/ 18 февраля 2020

Отсутствует запятая после "overflow: scroll", которая влияет на следующую строку CSS

.hero-image {
  overflow:scroll; // semi-colon added
  margin:0;
  top:0;
  width: 100vw;
  position: sticky;
  background-color: rgba(0, 0, 0, 0.3);
}
...