I have an HTML form element:
<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>
I would like there to be a little more space between the fields, for example, between the lines
<input id="name" name="name" type="text" /> <br/>
and
Phone number <br/>
,
and also between
<input id="phone" name="phone" type="text" /> <br/>
and Year <br/>
.
How can I do it?
I would wrap your rows in labels
<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>
And use
label, input {
display: block;
}
label {
margin-bottom: 20px;
}
Don't use br
s for spacing!
In your CSS file:
input { margin-bottom: 10px; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With