Why does line-height property not work with hyperlinks?

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

Don't use <br/> (which you've mistyped consistently) and line-height, use a list and adjust the margins on the list items.

Demo: http://jsfiddle.net/psP7L/

<ul id="navbar">
  <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>

#navbar    { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }

Proper, semantic markup first; then get the styling right.

---

However, to answer your question, it does "work", it's just that line-height on display:inline elements behaves differently per the spec than it does for display:block elements.

Answer 2

You have to apply the style to the anchor, and add display:block; to your CSS to make this work:

#navbar a{
  line-height: 2em;
  display: block;
}

Amongst some other fixes in your code you should end up with something like in this JSFiddle.