我正在做一个离子Angular 的应用程序。
在我目前正在处理的页面上，我有一个有角的材质<mat-card>，其中（红色边框），两个<mat-card-title>标记分别位于<ion-col>内（蓝色边框），格式为<ion-grid>（粉色边框）。为了组织卡片的整体格式，我首先尝试删除默认情况下存在的所有填充。为了消除这种填充，我在CSS中有一个no-space类，它具有以下属性。

.no-space {
  padding: 0px !important;
  margin: 0px !important;
}

这个类被应用到以下标签<mat-card> <mat-card-header> <ion-grid>。在<ion-grid>和<mat-card-header>之间仍然有空间。什么可能导致空间仍然存在？下面我将包括一个截图，显示这个空间与HTML和SCSS文件
HTML档案

<mat-card class="no-space">
  <mat-card-header class="red-border no-space">
    <ion-grid class="pink-border no-space">
      <ion-row>
        <ion-col class="blue-border">
          <!-- formatted to left showing starting date -->
          <mat-card-title>Example Date</mat-card-title>
        </ion-col>
        <ion-col class="blue-border"></ion-col>
        <ion-col class="blue-border">
          <!-- formatted to right side shows money spent / total -->
          <mat-card-title>$$$/$$$</mat-card-title>
        </ion-col>
      </ion-row>
    </ion-grid>
  </mat-card-header>
  <!-- a progress bar displaying spent / total -->
  <mat-card-content class="no-space">Simple Card</mat-card-content>
  <mat-card-actions class="no-space">
    <ion-button fill="solid" color="tertiary">Expand Card</ion-button>
  </mat-card-actions>
</mat-card>

SCSS文件

.red-border {
  border-color: red;
  border-width: 3px;
  border-style: solid;
}

.pink-border {
  border-color: pink;
  border-width: 5px;
  border-style: solid;
}

.blue-border {
  border-color: blue;
  border-width: 3px;
  border-style: solid;
}

.no-space {
  padding: 0px !important;
  margin: 0px !important;
}

编辑：我已经尝试了这个解决方案，但它没有删除空格How to remove space (margin/padding) of ion-row and ion-col in ionic?见我的评论如下。