html - これらのフォーム ボックスの間にパディングを入れるにはどうすればよいですか?

Question

1行に2つのフォームボックスを表示し、その下に別のフォームボックスを表示しようとしています。私が div を試しても、これら 2 つのフィールドを分離することはできません。私は それらの間に挿入しようとしましたが、うまくいきませんでした。

これが私のhtmlです：

<div class="form-line">
  <input class="input-text" id="name-box" type="text" name="name" value="Name">
  <input class="input-text" id="mail-box" type="text" name="mail" value="Email">
</div>

CSS:

.input-text {
  padding-left: 3px;
  font-family: sans-serif;
}

.input {
  display: inline;
}

.form-line {
  padding-top: 5px;
  clear:both;
}

#name-box {
  float: left;
}

#mail-box {
  float: left;
}

これらのボックスの間に 10px を配置する方法を教えてください。ありがとう。

Answer 1

メール ボックスに margin-left を指定すると、メール ボックスの css は次のようになります。

#mail-box {
  float: left;
    margin-left:10px;
}