Home>

This is a sample code that combines a hamburger menu and a slider.
The image creates a gap slightly below the top of the header bar, so I want to eliminate the gap.

I want to eliminate the gap
Applicable source code
<!doctype html><html><head><meta charset="utf-8"><title>MENU</title><link href="css/swiper.min.css" rel="stylesheet" type="text/css"><link href="css/menu.css" rel="stylesheet" type="text/css"><link href="css/slider.css" rel="stylesheet" type="text/css"><link href="css/container.css" rel="stylesheet" type="text/css"><script type=<"css/slider.css" rel="stylesheet" type="text/css"></script></head><body><input type="checkbox" role="button" title="menu" /><label for="humberger_check" aria-hidden="true" title="menu"><span></span></label><header>SITE TITLE</header><main><section>  3D Rotating Hidden Menu</section></main><nav><ul><li data-bar-color="#FA3687">  <i></i>IMAGE  </li><li data-bar-color="#21D7A8">  <i></i>VIDEO  </li><li data-bar-color="#1E9ED4">  <i></i>MUSIC  </li><li data-bar-color="#B0D44A">  <i></i>PERSONAL  </li><li data-bar-color="#A865D5">  <i></i>SETTINGS  </li></ul><span></span></nav><section>                      <p>Shaun Matthews</p>    <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>                              <p>Alexis Berry</p>    <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>                              <p>Billie Pierce</p>    <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>                        <p>Trevor Copeland</p>    <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>                              <p>Bernadette Newman</p>    <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>          <!-- If we need pagination --><!-- If we need navigation buttons --></section><script type="text/javascript" src="js/swiper.min.js"></script><script type="text/javascript" src="lib/jquery-3.5.0.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script src="js/slider.js"></script></body></html>
@charset "utf-8";
[class^="swiper-button-"],

 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before (
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
[class^="swiper-slide-shadow-"] {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
    background-color: #888;
    clear: both;
}
.swiper-container {
  width: 100%;
  height: 34vw;
  -webkit-transition: opacity .6s ease, -webkit-transform .3s ease;
  transition: opacity .6s ease, -webkit-transform .3s ease;
  transition: opacity .6s ease, transform .3s ease;
  transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.swiper-container.loading {
  opacity: 0;
}
.swiper-container.scale-out {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.swiper-container.scale-in {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  -webkit-perspective: 1600px;perspective: 1600px;
}
.swiper-slide.swiper-slide-active {
  z-index: 2;
}
.swiper-slide .entity-img {
  display: none;
}
.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
  -webkit-transform: translateZ(100px) translateX(100px);
          transform: translateZ(100px) translateX(100px);
}
.swiper-slide .content .title {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 30px;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 12px;
  line-height: 1.4;
}
[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}
.swiper-button-prev {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}
.swiper-button-next {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: .4;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: ``;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active (
  opacity: 1;
}
.swiper-container-horizontal >.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}
What I tried

on the body of slider css
margin: 0;
padding: 0;

Supplemental information (FW/tool ​​version, etc.)

dreamweaver cs6 chrome

  • Answer # 1

    In the entity-img classobject-fit:cover;Try wearing

    What do you think

    Maybe it will be solved.

    If you don't solve it, I'm sorry.