Why does line-height property not work with hyperlinks? - html

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>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
</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>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</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.

Answer 3

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>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
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>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</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/

Answer 4

#navbar a{ display:block;line-height:30px;}
Remove
demo http://jsfiddle.net/psP7L/1/