如何控制弹性项目之间的空间

Question

我只是在 Codeacademy 上做一些学习材料，我想知道如何控制“位置”文本和下面三个 div 之间的空间。任务要求我在它们之间创建一个 15px 的空间，但我不知道该怎么做。目前只有一个默认空间，不知道是怎么计算的。

html {
  text-align: center;
}

.location-container {
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
  height: 700px;
  width: 1200px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

#local {
  background-color: blueviolet;
}

.location-columns {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 30px;
  color: white;
}

.locations {
  background-color: black;
  width: 300px;
}

<div class="location-container">

  <h2 id="local">Locations</h2>

  <div class="location-columns">
    <div class="locations">
      <h3>Downtown</h3>
      <h5>384 West 4th St</h5>
      <h5> Suite 108</h5>
      <h5>Portland, Maine</h5>
    </div>
    <div class="locations">
      <h3>East Baysuide</h3>
      <h5>3433 Phisermans Avenue</h5>
      <h5>(Northwest Corner)</h5>
      <h5>Portland, Maine</h5>
    </div>
    <div class="locations">
      <h3>Oakdale</h3>
      <h5>515 Crescent Avenue</h5>
      <h5> Second Floor</h5>
      <h5>Portland, Maine</h5>
    </div>
  </div>

感谢您提供任何见解。

Answer 1

标题元素在默认浏览器样式中具有较大的上边距和下边距。

您可以删除 .locations 内的元素，使其成为弹性容器并使用 row-gap 控制垂直间距：

html {
  text-align: center;
}

.location-container {
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
  height: 700px;
  width: 1200px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

#local {
  background-color: blueviolet;
}

.location-columns {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 30px;
  color: white;
}

.locations {
  background-color: black;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  padding: 30px;
  width: 300px;
}

.locations>* { margin: 0; }

<div class="location-container">

  <h2 id="local">Locations</h2>

  <div class="location-columns">
    <div class="locations">
      <h3>Downtown</h3>
      <h5>384 West 4th St</h5>
      <h5> Suite 108</h5>
      <h5>Portland, Maine</h5>
    </div>
    <div class="locations">
      <h3>East Baysuide</h3>
      <h5>3433 Phisermans Avenue</h5>
      <h5>(Northwest Corner)</h5>
      <h5>Portland, Maine</h5>
    </div>
    <div class="locations">
      <h3>Oakdale</h3>
      <h5>515 Crescent Avenue</h5>
      <h5> Second Floor</h5>
      <h5>Portland, Maine</h5>
    </div>
  </div>