角度材质导航栏未对齐

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

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

* {
    margin: 0;
  }

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