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

Question

我正在设计一张垫卡，其中垫卡内容中有两张垫卡。现在，当为 mat-card-actions 添加按钮时，这两者之间没有任何间距。如何在这两个组件 [mat-card-content (of parent) 和 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

试试这个代码，如果这不起作用，创建一个 stackblitz 运行代码示例 -

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