我创建了一个 Angular (12) 项目，添加了具有“靛蓝-粉红色”主题的 Material 并创建了一个表单。但是所有表单组件都在渲染时彼此之间没有任何水平空白。出于测试目的，我复制了一个带有 Buttons from the Angular Material 网站的代码片段：

  <section>
    <div class="example-label">Raised</div>
    <div class="example-button-row">
      <button mat-raised-button>Basic</button>
      <button mat-raised-button color="primary">Primary</button>
      <button mat-raised-button color="accent">accent</button>
      <button mat-raised-button color="warn">Warn</button>
      <button mat-raised-button disabled>Disabled</button>
      <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
    </div>
  </section>

它们在我的应用程序中是这样呈现的：

但它们应该像在 Angular Material 网站上一样呈现：

样式表似乎在 angular.json 中正确导入：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","src/styles.css"
],

未添加或修改其他全局（或本地）样式。

如何修复边距？