Question

I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.

<form>
    <ol style="list-style:none">
        <li style="display: inline">
            <label for="fname">First Name</label>
            <input id="fname" type="text">
        </li>
        <li style="display: inline">
            <label for="lname">Last Name</label>
            <input id="lname" type="text">
        </li>
        <li>
            <label for="dept">Department</label>
            <input id="dept" type="text">
        </li>
   </ol>
</form>

Coming to the challenge I am facing,

1)I need to know how I can control the spacing between the label and the input field.

2)Also the space between the two li(first name and last names).

PS:I also have a CSS file which control the font,color,input width etc.

Answer 1

Try using margin-bottom and margin-top on your input elements.

See here for more info on margins in css.