如何在移动视图的 <div> 元素之间添加垂直间距？答案

【问题标题】：How can I add vertical spacing between elements in a <div> on mobile view?如何在移动视图的 <div> 元素之间添加垂直间距？
【发布时间】：2021-01-02 16:03:45
【问题描述】：

目前，我有一个 <div>，它是响应式的。

宽屏显示：

手机展示：

如何在移动显示屏上的 2 行之间添加垂直间距？我尝试为每个元素添加边距，但是，我不希望第二行有 margin-bottom。

我的代码如下：

HTML

<div class="stats-flexwrap">
    <div class="stats">
        <span class="stats-row"><span>element 1</span>
        <span class="stats-row"><span>element 2</span>
        <span class="stats-row"><span>element 3</span>
        <span class="stats-row"><span>element 4</span>
     </div>
 </div>

CSS

.stats-row {
    text-align: center;
    margin: 0 16px;
}

.stats {
    width: auto;
    display: flex;
}

@media screen and (max-width: 788px) {
    .stats {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin: 0;
        height: auto;
    }
    
    .stats-row {
        margin: 0 16px 0 16px !important;
        width: 120px;
    }
}

.stats-flexwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以使用gap 来设置网格内的间距：

gap: 25px;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

【讨论】：

【解决方案2】：

您可以使用 flex-box 解决此问题的一种方法是仅将 margin-bottom 提供给 flex-container 的第一个孩子。

.stats-row {
  text-align: center;
  margin: 0 16px;
}

.stats {
  width: auto;
  flex-wrap: wrap;
  display: flex;
}

@media screen and (max-width: 788px) {
  .stats {
    justify-content: center;
  }
  .stats-row {
    width: 120px;
  }
  .stats *:nth-child(1) {
    margin-bottom: 10px;
  }
}


.stats-flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

<div class="stats-flexwrap">
  <div class="stats">
    <span class="stats-row">element 1</span>
    <span class="stats-row">element 2</span>
    <span class="stats-row">element 3</span>
    <span class="stats-row">element 4</span>
  </div>
</div>

但这不是解决此问题的理想方法。您可能需要考虑使用 CSS Grid 来处理垂直间距。

这样可以确保：

使用gap的所有元素之间的垂直间距是均匀的
布局通过使用网格auto-fill or auto-fit 填充可用空间来保持响应式

您可以通过谷歌搜索或查看 CSS-Tricks 的 all-in-one guide 来了解更多这些 CSS 网格选项。如果您希望继续使用 flexbox，您现在可以使用此解决方法（尽管不鼓励这样做）。

【讨论】：

【解决方案3】：

添加垂直边距并不难。只需使用nth-child() 选择器。
您可以添加任何想要添加的数字，这里我在元素 2 上使用 margin: 0 10px 20px 10px;，在元素 4 上使用 margin: 0 10px 0 10px;。
我没有在元素 4 上使用 margin-bottom，只是在元素 2 上使用。

.container {
  display: flex;
  justify-content: space-around;
}

@media(max-width: 768px) {
  .container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .box:nth-child(2) {
    margin: 0 10px 20px 10px;
  }
  .box:nth-child(4) {
    margin: 0 10px 0 10px;
  }
}

<div class="container">
  <div class="box">element 1</div>
  <div class="box">element 2 </div>
  <div class="box">element 3</div>
  <div class="box">element 4</div>
</div>

如果它仍然不适合你，请告诉我。

【讨论】：

【解决方案4】：

通过使用 margin-bottom 属性，您还可以为特定元素添加底部边距。

HTML：

<div class="stats-flexwrap">
<div class="stats">
    <span class="stats-row"><span class="**ele_1**">element 1</span>
    <span class="stats-row"><span class="**ele_2**">element 2</span>
    <span class="stats-row"><span>element 3</span>
    <span class="stats-row"><span>element 4</span>``
</div>
</div>

CSS：

**.ele_1{
   margin-bottom:8%;
      }
.ele_2{
   margin-bottom:8%;
      }**


.stats-row {
text-align: center;
margin: 0 16px;
           }

.stats {
width: auto;
display: flex;
       }

@media screen and (max-width: 788px) {

.stats {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    height: auto;
}

.stats-row {
    margin: 0 16px 0 16px !important;
    width: 120px;
    }
  }

.stats-flexwrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
  }

【讨论】：

【解决方案5】：

添加行距的最简单方法是使用<br> 标签，但更准确地说，我们可以使用行高。

p.spacing {
    line-height: 2;
  }

<p class="spacing">
    This is first line
</p>
<p class="spacing">
    This is new line
</p>

【讨论】：

添加行距的最简单方法是使用
标签，但更准确地说，我们可以使用 line-height。