Why is the li taller than the a child tags

css, html

Solution

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

Problem

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?

Original source