What is this unwanted and unknown space underneath my div?-CodePudding

Ok so I tried vertically aligning the text in my div. I tried all kinds of stuff. Turns out this little box is something I can't define and it is unknown and unwanted. I know that the green block is padding Anyone got a clue on this? This purple block is bugging me

.menu-intro {
  position: relative;
}

.intro-img-div {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  align-content: center;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}

.menu-intro-img {
  object-fit: contain;
  position: relative;
  width: 100%;
}

.menu-intro-text {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-flow: column;
  height: 300px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 50%;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}

.menu-intro-h1 {
  margin: 0;
  font-size: 3em;
}

.menu-intro-text p {
  font-size: 1.5em;
}

<main>
  <h1 class="text-centered">Our Menu</h1>
  <div class="menu">
    <div class="menu-intro">

      <div class="intro-img-div">
        <img src="style/img/menuintroimg.jpeg" alt="Background image of our food" class="menu-intro-img">
      </div>

      <div class="menu-intro-text">
        <h1 class="menu-intro-h1">A look at <span class="red-text">Jacque's</span></h1>
        <p>Scroll down and see what we have to offer!</p>
      </div>


    </div>
  </div>

</main>

CodePudding user response：

TURNS out this space is space that isn't filled out by text but is still registered as part of the div. You need to define another way of justifying content inside the div justify-content:space-evenly;

CodePudding user response：

Your menu-intro-text is a flex with explicitly defined height: 300px. The children elements looks to take less part of that height. So the purple area is a part that is left. And Inspector shows it to you in a convenient way. Now using this hint of the Inspector you can decide what to do: add more children to fill that unutilized space or you may want to distribute it with justify-content:space-evenly as it was proposed by @Andelo Motika above or, in my opinion, better with justify-content:space-around