Solution 1 :

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

Problem :

I have a component that simulates a badge. This component has the following CSS:

enter image description here


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


.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.

enter image description here

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

My div HTML:

 <div class="badges">
  *ngFor="let badge of badges"


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

I already tried using


property, but didn’t work.


Comment posted by TylerH

We need to see your relevant HTML in the question as well.

Comment posted by paulotarcio

Ok! I’ve edited it. I’m using angular.

Comment posted by John Paul R

I’m unfamiliar with this system. Does

Comment posted by John Paul R

The only other reason I could see this happening is if the

Comment posted by TylerH

@paulotarcio If you found the answer (it sounds like you did), please post that as an answer explaining what the issue was and how you resolved it, and then mark it as the solution so future readers who have the same problem know!