css - 如何在不移动任何内容的情况下在输入下添加跨度？

Question

这是我的示例代码：

http://jsfiddle.net/AemFJ/

<div class="new_field">
<label class="field_names" for="whatver">First Name:</label>
<input type="text" class="whatverfield" name="name" id="name">
</div>
<div class="empty_spacer"></div>

<div class="new_field">
<label class="field_names" for="whatver">First Name:</label>
<input type="text" class="whatverfield" name="name" id="name">
</div>
<div class="empty_spacer"></div>

<div class="new_field">
<label class="field_names" for="whatver">First Name:</label>
<input type="text" class="whatverfield" name="name" id="name">
</div>
<div class="empty_spacer"></div>

.empty_spacer {
    margin-top: 25px;
}

空白空间很棒，但是当出现错误时，我想使用该空间显示“缺少名字”之类的消息。我试图通过在字段下的 .empty_spacer 中放置一个跨度来做到这一点，但是当我使用它时，它明显低于输入。

我想要做的是使用空间来显示使用相同空间但不添加更多空间的跨度。

Answer 1

您可以尝试将这些标签和输入包装到 3x2 表中。这将控制间距不变，并且仅在需要时显示相关的“间隔”行。

希望这可以帮助。

Answer 2

您应该使用line-height而不是，margin-top
但为此您必须将任何字符用于空格，例如 

这是小提琴：

小提琴