為什么我的 flexbox div 有這么多額外的空間？

Question

我不知道為什么我的 flexbox div 有很多額外的高度，我似乎無法修復它..但我想這與圖像有關。 我試過 min-height: 0; 但它沒有用。

 #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>

Answer 1

刪除或減少margin-top: 4rem; 在.container5_img css 中。

您可能還想減少.container5_img的底部邊距。

編輯：

要刪除更多空白，請刪除或減少margin: 2rem; 在#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>