Question

This is the html code for the hyperlinks. I wanted to have a slight gap between the texts. Like between ‘Menu’ and ‘Contact Us’ for instance. Thanks in advance.

<div id="navbar">

    <a class="fb" href="menu.html">Menu</a></br>
    <a href="ContactUs.html">Contact Us</a></br>
    <a href="About Us.html">About Us</a></br>
    <a href="TC.html">Terms & Conditions</a></br>
    <a href="jobs.html" target="_blank">Jobs</a></br>
    <a href="order.html">Your Order</a>

</div>

I set the line-height property in CSS as follows:

#navbar {
  line-height:2em;
}

Answer 1

you should define a line-height in anchor not in navbar id see the example code:-

HTML

<div id="navbar">

<a class="fb" href="menu.html">Menu</a></br>
<a href="ContactUs.html">Contact Us</a></br>
<a href="About Us.html">About Us</a></br>
<a href="TC.html">Terms & Conditions</a></br>
<a href="jobs.html" target="_blank">Jobs</a></br>
<a href="order.html">Your Order</a>

CSS

#navbar a {
color: red;
line-height: 33px;
text-decoration: none;

}

http://jsfiddle.net/8LFLd/50/

And the other proper method is i am mentioning below you should make navigation in proper ul li list items like mentioned below:-

HTML

<div id="navbar">
  <ul>
    <li><a class="fb" href="menu.html">Menu</a></li>
    <li><a href="ContactUs.html">Contact Us</a></li>
    <li><a href="About Us.html">About Us</a></li>
    <li><a href="TC.html">Terms & Conditions</a></li>
    <li><a href="jobs.html" target="_blank">Jobs</a></li>
    <li><a href="order.html">Your Order</a></li>
  </ul>
</div>

CSS

#navbar li {
    display:block;
    list-style-type:none;
    line-height:25px;
}
#navbar li a {
    text-decoration:none;
    color:red;
}
#navbar li a.fb {
    text-decoration:none;
    color:green;
}

#navbar li a:hover {
    text-decoration:none;
    color:blue;
}

demo:- http://jsfiddle.net/XZ9w7/3/