Why does my flexbox div have so much extra space?-CodePudding

I don't know why my flexbox div has a lot of extra height and I can't seem to fix it.. but I guess it has to do with the image. I tried min-height: 0; but it didn't work.

#container5 {
  display: flex;
  flex-direction: column;
  margin: 2rem;
  justify-content: center;
}

.container5_img {
  margin-top: 4rem;
  width: 100%;
  object-fit: cover;
  height: 50%;
  margin-bottom: 2rem;
}

.hr_2 {
  border: 1px solid black;
  margin-top: 3rem;
  width: 15rem;
}

.h2_reviews-2 {
  text-align: center;
  font-size: 3rem;
  font-family: "Merienda", cursive;
}

<div id="container5">
  <img class="container5_img" src="images/10.jpg" alt="A picture of Bella Ciao's Porto Restaurant inside" />
  <hr class="hr_2" />
  <h2 class="h2_reviews-2">MENU</h2>
</div>

CodePudding user response：

Remove or reduce margin-top: 4rem; in .container5_img css.

You may want to reduce the bottom margin as well in .container5_img.

EDIT:

To remove even more white-space, remove or reduce margin: 2rem; in #container5 css.

#container5 {
  display: flex;
  flex-direction: column;
  /* margin: 2rem; */
  justify-content: center;
}

.container5_img {
  /* margin-top: 4rem; */
  width: 100%;
  object-fit: cover;
  height: 50%;
  /* margin-bottom: 2rem; */
}

.hr_2 {
  border: 1px solid black;
  margin-top: 3rem;
  width: 15rem;
}

.h2_reviews-2 {
  text-align: center;
  font-size: 3rem;
  font-family: "Merienda", cursive;
}

<div id="container5">
  <img class="container5_img" src="https://picsum.photos/200" alt="A picture of Bella Ciao's Porto Restaurant inside" />
  <hr class="hr_2" />
  <h2 class="h2_reviews-2">MENU</h2>
</div>