如何减少Angular Material面板周围的空白区域？

嘿，我之前也碰到过这个问题！Angular Material的展开面板默认确实带了不少内边距，咱们可以通过几种方式来调整：

1. 直接覆盖默认样式（快速见效） #

Material的展开面板内容区域默认有固定的padding，你可以通过CSS穿透来修改它。注意如果你的组件开启了视图封装，需要用::ng-deep来确保样式生效，或者把这段样式放到全局样式文件（比如styles.css）里：

/* 调整展开面板内容区域的内边距 */
::ng-deep .mat-expansion-panel-content {
  padding: 8px !important; /* 改成你想要的数值，设为0就能完全去掉空白 */
}

/* 如果连面板头部的左右内边距也想调整，可以加这个 */
::ng-deep .mat-expansion-panel-header {
  padding: 0 12px !important; /* 按需修改数值 */
}

2. 用自定义类替代::ng-deep（更规范的方式） #

因为::ng-deep未来可能被废弃，你可以通过关闭组件的视图封装来使用自定义类：

首先在组件的TS文件里添加配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourComponent { }

然后在组件的CSS文件里写自定义样式：

.custom-expansion-panel .mat-expansion-panel-content {
  padding: 8px;
}

.custom-expansion-panel .mat-expansion-panel-header {
  padding: 0 12px;
}

最后在模板里给面板加上自定义类：

<mat-expansion-panel [expanded]="true" class="custom-expansion-panel">
  <mat-expansion-panel-header>
    <mat-panel-title>Summary</mat-panel-title>
  </mat-expansion-panel-header>
  <!-- main content here -->
</mat-expansion-panel>

3. 检查内容本身的间距 #

有时候多余空白可能不是面板的问题，而是你放在面板里的主内容自带margin或padding，先检查一下内部元素的默认样式，比如嵌套的<div>、<p>标签有没有额外间距，这也可能导致视觉上的空白过多。

你可以根据自己的需求调整数值，从0到合适的内边距都可以，灵活度很高～

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