CSS - 网格下的空白？

Question

I am still learning how to code CSS/HTML and very much a newbie at this. I created a simple 3 column 1 row grid. I am trying to figure out why there is a white space under my grid. It might not show on here via the snippet, but under the CMS I am working with, a huge white space under the grid keeps showing. I don't believe it's any of the other coding as it doesn't happen until I insert this particular code. Please see coding below.

 <style type="text/css">.cardcontainer { height: 125vh; width: 100%; display: flex; justify-content: center; }.card { grid-template-columns: repeat(3, 1fr); align-items: center; position: absolute; display: grid; gap: 0 50px; padding: 100px; }.card.card-item { position: relative; }.card img { height: 250px; width: 300px; transition: 0.4s ease-in-out all; }.card.card-details { position: absolute; padding: 10px 5px; bottom: 0px; opacity: 0; transition: 0.4s ease-in-out all; }.card-details h1 { font-size: 18px; color: white; margin: 2px 0; }.card-details p { font-size: 14px; }.card-item:hover.card-details { opacity: 1; bottom: 10px; }.card-item:hover img { transform: scale(1.05); } @media(max-width:600px) {.card { grid-template-columns: 1fr; gap: 0 10px; } </style>

 <div class="cardcontainer"> <div class="card"> <div class="card-item"><img alt="" src="/content/Banana.png" style="width: 400px; height: 300px;" /> <div class="card-details"> <h1>Banana</h1> </div> </div> <div class="card-item"><img alt="" src="/content/Apple.png" style="width: 400px; height: 300px;" /> <div class="card-details"> <h1>Apple</h1> </div> </div> <div class="card-item"><img alt="" src="/content/Oranges.png" style="width: 400px; height: 300px;" /> <div class="card-details"> <h1>Oranges</h1> </div> </div> </div> </div>

Answer 1

This is because of padding: 100px; you have added in .card class