如何在没有任何移动的情况下在输入下添加跨度？

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
但你必须把任何字符的空间像 

这里是小提琴：

fiddle