Html 如何使跨距与输入字段的底部保持较小的间距？

我有以下代码：

<div class="each_new_field">
                <label class="labelified" for="whatver">First Name:</label>
                <input type="text" class="input_classified mr_missing_field_checker" name="first_name" id="first_name">

            </div>
  <span class="field_check">First Name is required</span>
  <br />
  <div class="each_new_field">
                <label class="labelified" for="whatever2">Last Name:</label>
                <input type="text" name="last_name" id="a" class="input_classified">
            </div>

.input_classified {
    border: 1px solid #000;
    color: #807C7C;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 5px 10px;
    transition: background 0.5s ease-in-out 0s;
    width: 260px;
}
.labelified {
    color: #4C5157;
    float: left;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-top: 5px;
    width: 160px;
}
.field_check {
    color: #FF6600;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    margin-left: 160px;
}

名字：
名字是必需的


姓氏：
.input_分类{
边框：1px实心#000；
颜色：#807C7C；
字体大小：12px；
边缘底部：10px；
填充物：5px10px；
过渡：背景0.5秒缓进缓出0秒；
宽度：260px；
}
.标签化{
颜色：#4C5157；
浮动：左；
字体系列：“开放式Sans”、Arial、Helvetica、Sans serif；
字体大小：12px；
边缘顶部：5px；
宽度：160px；
}
.现场检查{
颜色：#FF6600；
字体系列：Arial；
字体大小：12px；
字体大小：粗体；
左边距：160像素；
}

对于当前代码，表示需要名字的范围与上面的输入字段之间有空格。我需要他们之间的空间是3倍。如何将跨度自然向上移动，然后添加一个边距顶部：3px；对吗

---

您可以尝试使用负边距顶部将跨度向上推，但也可能需要将其设置为块或内联块

.field_check {
    display: inline-block; /* don't remember if you need this, try without first */
    margin-top: -5px; /* adjust this as you need */
}

---

如果您不想弄乱字段的边距，可以尝试以下方法：

.field_check {
    top: -10px;
    position: relative;
}

---

预览：

将

页边距底部设置为
.input\u classified
设置为
0
您可以通过以下操作从顶部输入中删除底部填充：

.input_classified:first-child {
   margin-bottom: 0;
}

然后像通常那样将页边距顶部添加到标签：

.labelified {
   margin-top: 3px;
}

Position:relative
可以让事情变得简单：）

您可以在html中尝试类似的内容

<div class="each_new_field">
<label class="labelified" for="whatver">First Name:</label>
<input type="text" class="input_classified mr_missing_field_checker" name="first_name"  id="first_name">
      <br>
<span class="field_check">First Name is required</span>
</div>


名字：


名字是必需的
谢谢@populus。这不管用。使用“显示内联块”时，上边距不能为负。如果我使用display:block，它仍然会在底部添加空格。在
上的
行高：5px
。field\u check
？这是可行的，但我假设@starbucks只希望在表单验证失败时显示跨距。因此，当表单最初加载时，删除边距会将所有字段塞满在一起。
<div class="each_new_field">
<label class="labelified" for="whatver">First Name:</label>
<input type="text" class="input_classified mr_missing_field_checker" name="first_name"  id="first_name">
      <br>
<span class="field_check">First Name is required</span>
</div>