填充未应用于角度材质中的html标记

Question

我正试图在我的角度应用程序中的h1标记后应用一些空格。我用的是棱角分明的材料。CSS代码是

.h1{
padding: 6px 10px 6px 10px;   /* 10px left and right padding*/
box-sizing: border-box;
}

html代码是

<mat-toolbar color="primary" class="navbar">
<mat-toolbar-row>
<h1>MoD</h1>
<div>
<a mat-button [routerLink]="'/home'"> Home </a>
<a mat-button [routerLink]="'/aboutUs'"> About Us </a>
<a mat-button [routerLink]="'/contacts'"> Contacts </a>       
</div>
</mat-toolbar-row>
</mat-toolbar>

我似乎不明白为什么padding-right没有区别。按钮总是靠近标题。我是刚接触棱角材料的，如果有任何帮助，我将不胜感激，谢谢。

Answer 1

这里h1是一个元素，而不是一个类，所以请移除。(dot(在css 中h1前面

Right Way:
<h1> .... </h1>
h1{
padding: 6px 10px 6px 10px;
box-sizing: border-box;
}
Wrong Way:
<h1> .... </h1>
.h1{
padding: 6px 10px 6px 10px;
box-sizing: border-box;
}