[ANSWERED] html – Put vertical spacing among items using

Question 1

The label class was giving me a strange space, I removed it and it worked.

Question 2

I have a component that simulates a badge. This component has the following 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;
}

I need to place it in a flex div, placing vertical spaces between them, but because of the padding, they look overlaid.

how can I give the right vertical spacing bewtween my items?

My div HTML:

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

CSS:

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

I already tried using

margin-bottom

property, but didn’t work.

Bollate