使用在项目之间放置垂直间距答案

【问题标题】：Put vertical spacing among items using使用在项目之间放置垂直间距
【发布时间】：2020-12-08 06:00:20
【问题描述】：

我有一个模拟徽章的组件。该组件具有以下 CSS：

HTML：

  <div class="label label-as-badge">
      {{ value.Termo }}
      <i class="fa fa-times"></i>
    </div>

CSS：

.label-as-badge {
  cursor: pointer;
  margin-left: 5px;
  border-radius: 50px;
  font-size: 12px;
  padding: 10px;
  background: #0066ba;
}

我需要将它放在一个 flex div 中，在它们之间放置垂直空间，但是由于填充，它们看起来是重叠的。

我怎样才能在我的项目之间提供正确的垂直间距？

我的 div HTML：

 <div class="badges">
  <app-badges
  *ngFor="let badge of badges"
  [value]=badge>
  </app-badges>
  </div>

CSS：

.badges {
    display: flex;
    flex-wrap: wrap;
  }

我已经尝试过使用

边距底部

财产，但没用。

【问题讨论】：

我们还需要在问题中查看您的相关 HTML。
好的！我已经编辑过了。我正在使用角度。
我不熟悉这个系统。 app-badges 会被徽章取代，还是徽章会填满它？如果是后者，那么您需要为 app-badges 提供 badges 类。
我能看到这种情况发生的唯一其他原因是label 类是否有问题。
@paulotarcio 如果您找到了答案（听起来像您找到了），请将其发布为解释问题所在以及您如何解决问题的答案，然后将其标记为解决方案，以便未来的读者有同样问题的知道！

【解决方案1】：

标签类给了我一个奇怪的空间，我删除了它并且它起作用了。

【讨论】：