Separating Angular Material cards vertically

Question

I want to list items in an array vertically with cards, but there is no space between them. I tried to use padding but it seems it doesn't work.

card image

How can I have these cards spaced?

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="asd cardPardding" *ngFor="let title of titles">
      <p>
      {{title}}
      </p>
    </mat-card>
  </ng-container>

  <ng-template #noTitle>
    <mat-card class="asd cardPardding">
      <p>
      No title !
      </p>
  </mat-card>
  </ng-template>

This is css

.asd {
  width: 80%;
  margin: 0 auto; /* Added */
}

.inputasd {
  width: 100%;
}

.cardPadding {
  padding: 100px;
  margin-bottom: 50px;
}

Kliment

margin-bottom: 10px; – Twopiece

I tried, it should work but It doesn't. – Kliment

Are you applying the property to the right element? mat-card { margin-bottom: 10px; } – Twopiece

I was applying the property to right element but wrong class name. This was my mistake. Thanks. – Kliment

Answer 1

.component.html

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
        <p>
            {{title}}
        </p>
    </mat-card>
</ng-container>

<ng-template #noTitle>
    <mat-card class="asd cardPardding">
        <p>
            No title !
        </p>
    </mat-card>
</ng-template>

.css/.scss file

.my-class-name{
    margin-bottom: 10px;
    ... 
}

Baste

Answer 2

I spent too much time to fix this. Then I thought I know something wrong but my mistake was only 1 letter in the class name. You all right, margin works. I typed class name wrong. Thanks for the response.

Kliment