如何消除section中.product、.price与button元素间的巨大间距？

问题根源 #

你的section容器同时设置了**固定高度height: 500px**和Flex布局的justify-content: space-between，这会让容器内的子元素（图片容器、.product文本、.price文本、按钮）在垂直方向上自动均匀分布，填充整个500px高度，从而导致元素间出现大量空白。这也是你调整元素margin/padding无效的核心原因——Flex的空间分配逻辑优先级高于元素自身的边距。

解决方案 #

方案1：让容器高度自适应内容（推荐）

移除section的固定高度，改用min-height保证布局整齐，同时调整justify-content为flex-start，让元素从上到下排列，再通过margin控制元素间距：

main > section{
    background-color: white;
    /* 替换固定height为min-height，保证卡片最小高度统一 */
    min-height: 500px;
    width: calc((100% / 2) - 50px);
    margin: 10px;
    box-shadow: 1px 1px 5px;
    display: flex;
    /* 改为flex-start，元素从上到下排列 */
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 15px;
    transition: transform 0.3s ease; 
}

/* 给元素添加合理间距 */
.product {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 15px 0;
}

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

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

方案2：固定容器高度，让按钮固定在底部

如果希望保持section高度统一，可保留min-height: 500px，通过margin-top: auto让按钮固定在容器底部，其他元素正常排列：

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

button{
    /* auto margin会自动填充上方剩余空间，把按钮推到底部 */
    margin-top: auto;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: hsl(120, 100%, 33%);
    color: white;
    transition: background-color 0.3s;
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Aďo Azari