在 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%;
}