I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertical space between the mat-card-content and mat-card-actions components?
app.component.scss
.Details {
padding-top: 50px;
padding-bottom: 50px;
padding: 100px 250px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 50%;
}
.seatsAvailable {
float: left;
width: 45%;
// margin-right: -50px;
}
.ticketPrice {
float: right;
width: 45%;
// margin-right: -50px;
}
app.component.html
<div class="Details">
<mat-card>
<button mat-icon-button><mat-icon>arrow_back</mat-icon>Back</button>
<mat-card-header>
<mat-card-title>Name</mat-card-title>
<mat-card-subtitle>Status value</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-card class="seatsAvailable">
<mat-card-header style="text-align:center; margin-left: 60px;">
<mat-card-title>Seats</mat-card-title>
</mat-card-header>
<mat-card-content>
<strong>Seats value</strong>
</mat-card-content>
</mat-card>
<mat-card class="ticketPrice">
<mat-card-header style="text-align:center; margin-left: 60px;">
<mat-card-title>Ticket Price:</mat-card-title>
</mat-card-header>
<mat-card-content>
<strong>Ticket Price value</strong>
</mat-card-content>
</mat-card>
</mat-card-content>
<br>
<mat-card-actions style="margin-top:50px; margin-bottom: 50px;">
<button mat-button style="border: 1px solid rgb(77, 40, 146);">Result msg</button>
</mat-card-actions>
</mat-card>
</div>