为何mat-form-field标签底部会出现额外空白？

我在Angular Material表格的列中嵌入mat-form-field作为输入框时，单元格底部出现了多余空白，代码如下：

<ng-container matColumnDef="marks" >
    <th mat-header-cell class="mat-header-cell" *matHeaderCellDef style="text-align: center;">Marks</th>
        <td mat-cell class="mat-cell" data-header="Marks" *matCellDef="let student" style="text-align: center;" >
            <mat-form-field  class="formfield" appearance="outline" ><mat-label>Marks</mat-label>
            <input class="input" matInput type="number"></mat-form-field>
        </td>
</ng-container>

通过开发者工具定位到，问题是由带有mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align类的div导致的——这个容器默认用于承载错误提示、帮助文本等内容，即便没有内容也会默认占据一定高度，从而产生空白。

下面是几种可行的解决方法：

方法1：隐藏无内容的subscript容器 #

通过CSS选择器直接隐藏空的subscript容器，避免占位：

/* 全局样式文件（如styles.css）中添加 */
.mat-mdc-form-field-subscript-wrapper:empty {
  display: none;
  height: 0;
  margin: 0;
}

/* 或者仅针对表格中的formfield（如果有自定义类.formfield） */
.formfield .mat-mdc-form-field-subscript-wrapper:empty {
  display: none;
}

方法2：启用动态subscript尺寸 #

利用mat-form-field的subscriptSizing="dynamic"属性，让subscript容器仅在有内容时显示，无内容时自动收缩高度：

<mat-form-field class="formfield" appearance="outline" subscriptSizing="dynamic">
  <mat-label>Marks</mat-label>
  <input class="input" matInput type="number">
</mat-form-field>

方法3：强制压缩formfield底部间距 #

通过CSS直接调整mat-form-field的底部边距和subscript容器的最小高度：

.formfield {
  margin-bottom: 0;
}

.formfield .mat-mdc-form-field-subscript-wrapper {
  min-height: 0;
  margin-top: 0;
}

内容的提问来源于stack exchange，提问作者darshan k