CODEWITHSUNDEEP
htmlcss
TheKraven
TheKraven

Reputation: 583

Why does line-height property not work with hyperlinks?

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;
}

Upvotes: 6

Views: 9692

Answers (4)

Shailender Arora
Shailender Arora

Reputation: 7788

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/

Upvotes: 3

patrick
patrick

Reputation: 11731

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.

Upvotes: 5

ShibinRagh
ShibinRagh

Reputation: 6656

#navbar a{ display:block;line-height:30px;}

Remove

demo http://jsfiddle.net/psP7L/1/

Upvotes: 1

Phrogz
Phrogz

Reputation: 303559

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.

Upvotes: 8

Related Questions