Как избавиться от этих огромных пробелов между элементами .product, .price и кнопок в разделе? ⇐ Html

[Anonymous]

eCommerce Page
[*]



GiggleGear

• 
  Home
  
  
• New Arrivals
  
  
• Best Sellers
  
  
• Sale
  

Maybe broccoli doesn't like you either T-shirt
17.99€
Add to Cart





Seems getting shredded wasn't that hard T-shirt
17.99€
Add to Cart





Has anyone tried unplugging the US and plugging it back in?
17.99€
Add to Cart





Pro tip: If you hear weird noises at night, just make weirder noises to assert dominance
17.99€
Add to Cart



&copy 2025 GiggleGear. All rights reserved.



< /code>
:root{
--darkgray: hsl(0, 0%, 21%);
}

body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
background-color: rgb(236, 235, 233);
}

header{
color: white;
background-color: var(--darkgray);
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

a{
text-decoration: none;
color: white;
display: inline-block;
margin: 1vw;
transition: color 0.3s;
}

a:hover{
color:turquoise;
}

header > h1{
margin-right: 10vw;
}

li{
list-style-type: none;
}

main{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 15px;
padding-left: 25%;
padding-right: 25%;
}

main > section{
background-color: white;
height: 500px;
width: calc((100% / 2) - 50px);
margin: 10px;
box-shadow: 1px 1px 5px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
text-align: center;
padding: 15px;
transition: transform 0.3s ease;
}

section:hover{
transform: scale(1.025)
}

div > img{
width: 200px;
height: 250px;
object-fit: cover;
}

div{
border: 5px solid;
width: 200px;
height: 250px; /*same as the img*/
}

.price{
color: rgb(0, 191, 255);
}

.product {
min-height: 60px; /* Adjust based on expected length */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

@media screen and (max-width: 768px) {
main {
padding-left: 5%;
padding-right: 5%;
}

main > section {
width: 90%;
}
}

button{
padding: 10px;
border: none;
border-radius: 5px;
background-color: hsl(120, 100%, 33%);
color: white;
transition: background-color 0.3s;
cursor: pointer;
}

button:hover{
background-color: hsl(120, 100%, 40%);
}

footer{
background-color: var(--darkgray);
color: white;
text-align: center;
padding: 5px;
}
< /code>
There's probably some type of default margin or padding. I have no idea.
I tried everything. Line height, margin, padding, but nothing worked. Even ChatGPT couldn't help me. I'm sure it can't be that hard but I can't figure it out. I guess it's conflicting code or flexbox or something like that. Probably the flexbox.

Подробнее здесь: https://stackoverflow.com/questions/796 ... tton-eleme