向输入元素添加填充时，没有任何反应

Question

问题是我想在

<form>

中的输入元素的左侧和右侧添加 10px 填充。

这是我的表单 HTML

input {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding-left: 1rem;
  box-sizing: border-box;
}

<form action="" class="form">
  <div class="form-left">
    <label for="first-name">FIRST NAME
                  <input
                    type="text"
                    id="first-name"
                    name="first-name"
                    required
                  />
                </label>
    <label for="password">PASSWORD
                <input type="password" id="password" name="password" required />
              </label>
  </div>
  <div class="form-right">
    <label for="last-name">LAST NAME
                <input type="text" id="last-name" name="last-name" required />
              </label>
    <label for="password-confirmation">CONFIRM PASSWORD
                <input
                  type="password"
                  id="password-confirmation"
                  name="password-confirmation"
                />
              </label>
  </div>
</form>

Answer 1

我认为你需要 margin-left: 1rem; 代替 padding-left: 1rem; 如果我正确理解你的问题，你只想在标签和输入字段之间留一些间距。

提示： 您不必将输入字段包装在标签标签内，请参阅下面的示例：

<label htmlFor="password-confirmation">CONFIRM PASSWORD</label>
<input
 type="password"
 id="password-confirmation"
 name="password-confirmation"
/>