Question 393349 in Html Question posted in
Some basic documentation can be found here.

Html – How do I get rid of the gap between divs caused by display flex?

Here’s what it looks like in visual code I keep getting a gap between my container and pages divs, I can get rid of it by removing display:flex from the css, but that misaligns the video, overlay and content. How can I get rid of the gap without throwing everything off?

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: #292626;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
}
.container .content{
    opacity: 0.75;
    margin-bottom: -100px;
}

.overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.4;
    right: 0;
    bottom: 0;
    z-index: -1;
}

body{
    font-family: 'MontFont', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0rem;
}

.Holmes1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Park1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.ContactME1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
section{
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    margin-top: -4px;
}
.Holmespage{
    background-color: #373333;
}
.Parkpage{
    background-color: #292626;
}
<div class="container">
    <div class="overlay"></div>
    <div class="content">
      <h1>Test</h1>
    </div>
  </div>
  <div class="Pages">
    <section class="Holmespage">
        <div class="Holmes1">HOLMES</div>
    </section>
    <section class="Parkpage">
        <div class="Park1">PARK</div>
    </section>
    <section class="Contactpage">
        <div class="ContactME1">CONTACT</div>
    </section>
  </div>

I’ve tried to change the margin to 0, negative and positive amounts, including trying on the top and bottom margin separately, not sure if it’s cause I’m not applying it to the right place. Also tried to use Display: flex box but that didn’t work, and using flex: 1

Tags:

3

Answers


  1. 0

    Try to add display: flex; and gap: 0; to your class .Pages.

    Login or Signup to reply.
  2. 0

    In reality, there is no gap between the pages div and the container divs. It is the overlay div in the container div that does not take the full height of its parent because of bottom: 0 css property.

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: #292626;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
}
.container .content{
    opacity: 0.75;
    margin-bottom: -100px;
}

.overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.4;
    right: 0;
    z-index: -1;
}

body{
    font-family: 'MontFont', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0rem;
}

.Holmes1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Park1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.ContactME1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
section{
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    margin-top: -4px;
}
.Holmespage{
    background-color: #373333;
}
.Parkpage{
    background-color: #292626;
}
    <div class="container">
    <div class="overlay"></div>
    <div class="content">
      <h1>Test</h1>
    </div>
  </div>
  <div class="Pages">
    <section class="Holmespage">
        <div class="Holmes1">HOLMES</div>
    </section>
    <section class="Parkpage">
        <div class="Park1">PARK</div>
    </section>
    <section class="Contactpage">
        <div class="ContactME1">CONTACT</div>
    </section>
  </div>
    Login or Signup to reply.
  3. 0

    whenever there is need to reduce the gap in between flex box you can simply achieve it by adding

    gap:0;

    however if the div inside flex is relatively positioned you can achieve it by adding width equals to calc(100% / n) where n is number of divs inside the flex.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search