angular-material - 在 matPrefix 和 matInput 之间添加间距

Question

我想在mat-form-field的matPrefix和matInput之间以角度添加一些间距。如何在 css 中定位它们？

这是我的代码：

.html：

<mat-form-field appearance="outline">
     <mat-label>Username</mat-label>
     <input matInput required>
     <span matPrefix class="prefix"><mat-icon>person</mat-icon></span>
</mat-form-field>

CSS：

.prefix{
color: rgb(0,0,0,0.45);
margin-right: 20px;
}

如您所见，我尝试添加类，然后选择带有类的 matPrefix，它可以很好地使用左边距，但现在可以使用右边距。

Answer 1

如果要在输入字段中留出边距。您需要减小输入宽度。我添加了 class="username"

<mat-form-field appearance="outline">
   <mat-label>Username</mat-label>
   <input matInput class="username" required />
   <span matPrefix class="prefix"><mat-icon>person</mat-icon></span>
</mat-form-field>

.username {
  width: 90%;
}