减少 Angular 材质面板周围的空白区域

【问题标题】：Reduce white space around Angular material panel减少 Angular 材质面板周围的空白区域
【发布时间】：2018-01-17 15:35:21
【问题描述】：

我正在尝试使用 Angular 5 的材质扩展面板。它工作正常，但我想减少主要内容周围有很多空白，但我不确定我应该使用哪些类或样式。

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

【问题讨论】：

标签： angular material-design angular-material2

【解决方案1】：

在组件的 CSS 文件中：

mat-expansion-panel,
mat-expansion-panel-header {
  padding: 0;
  margin: 0;
}

当然，玩这些价值观:)

【讨论】：

嗨，@trichetrich，感谢您的回复。这具有将标题文本摘要的左边距减少到 0 的效果，以便文本沿左边缘但一般空白仍然相同
您的意思是，您希望扩展面板的宽度不是 100%，并适应内容？
不是这样，我希望我可以显示在图像中。当我应用 css 时，它减少了左侧的空白，但不影响顶部和底部
如果您查看material.angular.io/components/expansion/overview 的示例，那么我想减少标题文本周围的空间，例如个人数据等。