Angular 材质 mat-card-content 和 mat-card-actions：如何更改这两者之间的间距？

Question

I am designing a mat card wherein, there are two mat cards in its mat-card-content. Now when adding a button for the mat-card-actions, there isn't any spacing between these two. How do I make a space (vertical) between these two components [mat-card-content (of parent) and mat-card-actions (of parent)]?

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>

Answer 1

try this code and if this does not work create a stackblitz running code sample -

<mat-card-actions style="width: 100%;display: inline-block;">
      <button mat-button style="border: 1px solid rgb(77, 40, 146);">Result msg</button>
</mat-card-actions>