如何刪除 mat-card-header 和 ion-grid 之間不需要的空白

Question

我正在處理 Ionic angular 應用程序。

在我目前正在處理的頁面上，我有一個 angular 材料<mat-card>和一個<mat-card-header> （紅色邊框），每個標簽在<ion-col>中有兩個<mat-card-title>標簽（藍色邊框）並使用<ion-grid> （粉紅色邊框）進行格式化。 為了組織卡片的整體格式，我首先嘗試刪除默認存在的任何填充。 為了擺脫這個填充，我在我的 CSS 中有一個no-space class 具有以下屬性。

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

此 class 應用於以下標簽<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>

文件

.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;
}

編輯：我試過這個解決方案，但它沒有刪除空格如何刪除離子行和離子列的空間（邊距/填充）？ 請參閱下面的評論。

Answer 1

感謝 E. Maggini 的評論，我找到了導致額外空間的原因。 編譯時，我的代碼中添加了一個帶有 class“mat-card-header-text”的額外<div> 。 見下圖。

我發現解決此問題的最佳解決方案是向 .mat-card-header-text class 添加樣式以將邊距減少到 0 請參閱此處的解決方案。 要正確應用樣式，請在 class 之前包含 ::ng-deep 組合器。::ng-deep 的使用已被棄用，但似乎沒有一個很好的替代品，因為這是一個副項目，我仍然會用它。 我發現一個建議在 ::ng-deep 之前加上 :host 以防止使用 ::ng-deep 的不良行為。 這是我用於解決方案的最終代碼。

:host ::ng-deep .mat-card-header-text {
  margin: 0px !important;
}