user3787751 user3787751 - 3 years ago 121
CSS Question

Why is the li taller than the a child tags

I don't know why the li tags are 1px taller than the a tags the code is as following
the fiddle http://jsfiddle.net/9Wy8z/

#nav {
width: 100%;
background-color: #5A9AFF;
}

#nav > #nav_container > ul{
margin: 0;
padding: 0;
list-style: none;
}

#nav > #nav_container > ul > li {
display: inline-block;
padding: 10px 0;
}

#nav > #nav_container > ul > li > a {
padding: 10px;
text-decoration: none;
color: #1b1b1b;
}

#nav > #nav_container > ul > li > a:hover {
background-color: #e0e0e0;
}


<div id="nav">
<div id="nav_container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>


this leads the a tags to be 38px and the li 39px and i am unsure why this is?

Answer Source

This is because a elements are inline by default. That's why you've had to add padding to the li element; the li is taking the height of its content, which is inline (it doesn't count the padding). The problem with this approach is that li elements also have some inherent padding, and it's not equal to the padding you're giving the a element.

Setting the a tag to display:block; and removing the padding from the li will solve this issue by displaying the a element in block rather than inline, and causing the li to only take the size of the a element (and not more) minus any forced padding that you were trying to add in compensation.

JSFiddle

#nav > #nav_container > ul > li {
    display: inline-block;
}

#nav > #nav_container > ul > li > a {
    padding: 10px;
    text-decoration: none;
    color: #1b1b1b;
    display: block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download