如何在CSS中缩小card-outer容器高度，实现卡片50px间距？

嘿，我来帮你搞定这个卡片间距的问题！你遇到的核心问题是.card-outer设置了min-height:100vh，这个属性会让容器至少占满整个浏览器视口的高度——哪怕卡片本身只有250px高，容器也会被撑到屏幕底部，这就导致第二张卡片被硬生生挤到这个超大容器的下方，自然间距大到离谱。

下面给你两种简单有效的解决方案：

方案一：用Flex容器统一管理两张卡片（推荐） #

把两张卡片都放进同一个.card-outer容器里，利用Flex的垂直排列和gap属性精准控制间距，同时去掉多余的min-height：

修改后的CSS代码 #

.card-outer {
  display: flex;
  flex-direction: column; /* 设置垂直排列卡片 */
  justify-content: flex-start; /* 卡片从顶部开始排列 */
  align-items: center; /* 水平居中卡片 */
  gap: 50px; /* 直接设置两张卡片之间的间距 */
  padding: 50px 0; /* 给容器上下加内边距，避免卡片贴到屏幕边缘 */
  /* 移除 min-height: 100vh 这个导致容器过高的属性 */
}

.card {
  width: 500px;
  height: 250px;
  display: flex;
  overflow: hidden;
  background: rgb(16, 33, 72);
  box-shadow: 0 5px 10px #031e23;
  border-radius: 30px;
  color: white;
  font-family: 'Dosis';
  /* 这里的 margin-top:50px 可以保留，也可以去掉，看你是否需要顶部额外间距 */
}

/* 其他CSS样式保持不变 */
.card .img-card {
  background: url(parque.png);
  width: 40%;
  height: 100%;
  background-size: cover;
  background-position: 60% 0%;
}

.card .content {
  width: 60%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px 150px 50px;
  padding: 10px 15px;
}

修改后的HTML代码 #

把两张卡片都放在同一个.card-outer里：

<div class="card-outer">
  <!-- 第一张卡片 -->
  <div class="card">
    <div class="img-card"></div>
    <div class="content">
      <div class="titulo">
        <h3>Parque Metropolitano</h3>
      </div>
      <div class="text">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi consectetur, accusamus repellat architecto veritatis quis vel harum molestiae tempore ea illo ut sapiente magnam voluptate.
        </p>
      </div>
      <div class="btn-container">
        <button>Sitio web</button>
      </div>
    </div>
  </div>

  <!-- 第二张卡片 -->
  <div class="card">
    <!-- 这里放入第二张卡片的内容，比如替换标题和文本 -->
    <div class="img-card"></div>
    <div class="content">
      <div class="titulo">
        <h3>Segundo Parque</h3>
      </div>
      <div class="text">
        <p>另一段描述文本，Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
      <div class="btn-container">
        <button>Sitio web</button>
      </div>
    </div>
  </div>
</div>

方案二：给每个卡片容器添加底部间距 #

如果你想保持每个卡片都在独立的.card-outer里，那只需要移除.card-outer的min-height:100vh，并给容器添加底部间距：

修改后的CSS代码 #

.card-outer {
  display: flex;
  justify-content: center;
  margin-bottom: 50px; /* 给第一个容器加底部间距，控制两张卡片的距离 */
  /* 移除 min-height: 100vh */
}

/* 其他CSS样式保持不变 */

修改后的HTML代码 #

<!-- 第一张卡片容器 -->
<div class="card-outer">
  <div class="card">...</div>
</div>

<!-- 第二张卡片容器 -->
<div class="card-outer">
  <div class="card">...</div>
</div>

两种方案都能解决你的问题，个人更推荐第一种，因为它的结构更简洁，用gap控制间距也更直观、不容易出错。

内容的提问来源于stack exchange，提问作者José Pulido