创建一个空的div以放置边框

Question

我想在每次输入后添加点划线的灰色边框。到目前为止，它仍然有效。

灰色边框的格式为div form_padding_border，但在我的html中为空。 这样做正确吗？

<div class="form_padding">
     <label>Your Username:</label>
     <input type="text" name="username" class="form_group">
</div>

<div class="form_padding_border"></div>

    <div class="form_padding">
    <label>Your Email Adress:</label>
    <input type="email" name="email_adress" class="form_group">
</div>

Answer 1

在form_padding CSS类中，最好使用border-bottom属性。我还在我的顶部和底部间距上添加了行高。

.form_padding{
  border-bottom:1px solid rgba(0,0,0,0.1);
  line-height: 50px;
}

运行下面的代码作为示例。

h2 {
  color: red;
  margin-bottom: 10px;
}

input {
  border: 1px solid grey;
  border-bottom: 2px solid red;
}

.form_padding {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 50px;
}

<h2>ACCOUNT INFORMATION</h2>
<label>Please write down your Username, Password, Pin Code,Security Question, and Security Answer as a reminder before creating account.</label>

<div class="form_padding">
  <label>Your Username:</label>
  <input type="text" name="username" class="form_group">
</div>

<div class="form_padding">
  <label>Your Email Adress:</label>
  <input type="email" name="email_adress" class="form_group">
</div>