html - フォーム フィールド間の間隔

Question

HTMLフォーム要素があります：

<form action="doit" id="doit" method="post">
Name <br/>
<input id="name" name="name" type="text" /> <br/>
Phone number <br/>
<input id="phone" name="phone" type="text" /> <br/>
Year <br/>
<input id="year" name="year" type="text" /> <br/>
</form>

行間など、フィールド間にもう少しスペースが欲しい

<input id="name" name="name" type="text" /> <br/>そして Phone number <br/>、

また、その間

<input id="phone" name="phone" type="text" /> <br/>とYear <br/>。

どうすればいいですか？

Answer 1

行をラベルでラップします

<form action="doit" id="doit" method="post">
    <label>
        Name
        <input id="name" name="name" type="text" />
    </label>
    <label>
        Phone number
        <input id="phone" name="phone" type="text" />
    </label>
    <label>
        Year
        <input id="year" name="year" type="text" />
    </label>
</form>

そして使う

label, input {
    display: block;
}

label {
    margin-bottom: 20px;
}

br間隔に s を使用しないでください。

デモ: http://jsfiddle.net/D8W2Q/

Answer 2

CSS ファイルで:

input { margin-bottom: 10px; }

Answer 3

シンプルな&nbsp; 入力フィールドの間で簡単に仕事ができます...