I am currently studying Angular 8 and need some help figuring out why there is no space between these cards. The image below indicates a red line where the space should be.
https://i.sstatic.net/riMYF.png
Below is my Component html:
<mat-card class="mat-space-bottom">
<mat-card-header><mat-card-title>Book Search API</mat-card-title></mat-card-header>
<form [formGroup]="newContact" class="form-container">
<mat-form-field>
<input type="text" matInput placeholder="Title" formControlName="title" #box (keyup.enter)="getTitle(box.value)"> <p>{{value}}</p>
</mat-form-field>
<mat-form-field>
<input type="text" matInput placeholder="Author" formControlName="author" #box (keyup.enter)="getAuthor(box.value)"> <p>{{value}}</p>
</mat-form-field>
<mat-form-field>
<input type="text" matInput placeholder="Genre" formControlName="genre" #box (keyup.enter)="getGenre(box.value)"> <p>{{value}}</p>
</mat-form-field>
<mat-form-field>
<input type="text" matInput placeholder="Price" formControlName="price" #box (keyup.enter)="getPrice(box.value)"> <p>{{value}}</p>
</mat-form-field>
</form>
</mat-card>
<mat-card class="mat-space-bottom" *ngFor="let phone of bookItems">
<mat-card-header >
<!-- <div mat-card-avatar class="firstLetter">{{phone.title | slice:0:1 | uppercase}}</div> -->
<mat-card-title>{{phone.title | titlecase}}</mat-card-title>
<mat-card-subtitle>{{phone.description}}</mat-card-subtitle>
<mat-card-subtitle>{{phone.author}}</mat-card-subtitle>
<mat-card-subtitle>{{phone.genre}}</mat-card-subtitle>
<mat-card-subtitle>{{phone.publish_date}}</mat-card-subtitle>
<mat-card-subtitle>{{phone.price}}</mat-card-subtitle>
</mat-card-header>
<!--
<mat-card-actions>
<a title="Edit Contact" routerLink="/contact/{{phone.id}}">
<i class="material-icons">edit</i>
</a>
<a class="delete" title="Delete Contact" (click)="delete(phone, phone.id)">
<i class="material-icons">close</i>
</a>
</mat-card-actions>
</div> -->
</mat-card>
And this is my scss for styling:
mat-card {
display: flex;
}
mat-card-header {
width: 100%;
display: flex;
align-items: center;
}
mat-card-actions {
margin-left: auto;
}
mat-card-subtitle {
margin-bottom: 0;
}
mat-card:not(:last-child) {
margin-bottom: 15px;
}
mat-card-actions {
padding-top: 0;
}
.firstLetter {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
}
mat-card:nth-child(1n) .firstLetter {
background: #2e6da4;
}
mat-card:nth-child(2n) .firstLetter {
background: #4cae4c;
}
mat-card:nth-child(3n) .firstLetter {
background: #46b8da;
}
mat-card:nth-child(4n) .firstLetter {
background: #eea236;
}
mat-card:nth-child(5n) .firstLetter {
background: #d43f3a;
}
.delete i {
cursor: pointer;
color: #d43f3a;
}
.mat-space-bottom {
margin-bottom: 10px;
...
}