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
ますが、そのためには、次のようなスペースに任意の文字を配置する必要があります 

ここにフィドルがあります：

フィドル