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

Question

我有一个模拟徽章的组件。该组件具有以下 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 中，在它们之间放置垂直空间，但由于填充，它们看起来重叠。

如何在我的项目之间设置正确的垂直间距？

我的divHTML:

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

CSS:

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

我已经尝试使用

底部边距

属性，但没有成功。

Answer 1

标签 class 给我一个奇怪的 space，我删除了它并且有效。

Put vertical spacing among items using