如何在输入字段之间留出小空间？答案

【问题标题】：How to make a small space between the input fields?如何在输入字段之间留出小空间？
【发布时间】：2019-11-28 00:35:26
【问题描述】：

如何在输入字段之间留出小空间？仅不使用 Angular Material 示例中所示的表格。

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder="Test1">
      </mat-form-field>
    </div>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder=" Test2">
      </mat-form-field>
    </div>
  </div>

【问题讨论】：

标签： html css angular-material angular-flex-layout

【解决方案1】：

我看到您使用了pt10，它会在顶部为您提供 10 像素的填充，因此基于该逻辑，我建议您添加 mb10，这将在您的第一个输入底部留下 10 像素的边距空间。

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
<div class="mb10"fxFlex="50">
  <mat-form-field class="example-full-width">
    <input matInput type="text" placeholder="Test1">
  </mat-form-field>
</div>
<div fxFlex="50">
  <mat-form-field class="example-full-width">
    <input matInput type="text" placeholder=" Test2">
  </mat-form-field>
</div>

【讨论】：

我帮了mr10

【解决方案2】：

你可以简单地使用

<br>

示例：

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxFlexFill>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder="Test1">
      </mat-form-field>
    </div>
    <br>
    <div fxFlex="50">
      <mat-form-field class="example-full-width">
        <input matInput type="text" placeholder=" Test2">
      </mat-form-field>
    </div>
  </div>

或使用 css 增加块的边距。见https://www.w3schools.com/css/css_margin.asp

【讨论】：

【解决方案3】：

<div class="content pt10" fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px">
        <div fxFlex>
          <mat-form-field class="example-full-width">
            <input matInput type="text" placeholder="Test1">
          </mat-form-field>
        </div>
        <div fxFlex>
          <mat-form-field class="example-full-width">
            <input matInput type="text" placeholder=" Test2">
          </mat-form-field>
        </div>
      </div>

您将使用 fxLayoutGap。如果要增加gap就要增加fxLayoutGap=20px或者30px

【讨论】：