角度材质导航栏未对齐

Question

我按照这些文章设置了我的 Angular 项目环境：

• https://material.angular.io/guide/getting-started
• https://angular.io/guide/quickstart
• https://material.angular.io/guide/schematics

ng项目创建后，我添加了材质导航架构。

ng g @angular/material:material-nav --name mat-nav

然后我用新的导航组件替换了默认app.component.html文件的内容。

<app-mat-nav></app-mat-nav>

然后我在styles.scss文件中导入了材质主题。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

最后，我启动了服务器。编译时没有错误，浏览器也没有错误。但我的页面布局如下所示。

注意标题栏上方的白条。

更新

经 Google 确认，它不是bug。这只是一个奇怪的功能。

Answer 1

默认情况下，CSS 边距添加在 body 标记中。在styles.scss文件中添加如下代码

* {
    margin: 0;
  }

您还可以使用 normalize.css 或 reset.css 文件覆盖默认浏览器样式。