如何实现垂直轴均匀间距 修复卡片内部元素边距不一致问题

布局失效的核心原因是弹性容器.homeResourceContent未设置高度，它的高度默认由内部内容撑开，justify-content: space-evenly的间距分配规则是基于容器自身可用高度生效的，容器高度不足就会导致底部出现多余留白。另外浏览器默认给h1、h2、p标签添加的自带外边距也会干扰均匀间距的计算。

只需要修改CSS代码，做两处调整即可：

• 给.homeResourceContent添加height: 100%，让它撑满卡片的可用高度
• 清零弹性容器内部子元素的默认外边距，避免额外间距干扰

.homeResourcesContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.homeResource{
    padding: 30px;
    margin: 100px; 
    width: 500px;
    height: 450px;
    border-radius: 18px;
    background: #800400;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}

.homeResourceContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    /* 新增：撑满父容器高度 */
    height: 100%;
}

/* 新增：清零子元素默认外边距，避免干扰 */
.homeResourceContent > * {
    margin: 0;
}

修改后space-evenly会自动将剩余高度均匀分配为：第一个元素顶部到卡片上边缘的间距、h1和p之间的间距、p和h2之间的间距、h2底部到卡片下边缘的间距，四个间距完全相等，刚好符合需求。如果担心段落内容太长溢出卡片，可以给.homeResourceContent p添加overflow-y: auto属性处理溢出。

内容的提问来源于stack exchange，提问作者Nick Johnson