Padding in <li>

Question

see jsFiddle example here

I'm applying padding-top to an li to try to align the text nearer to the bottom. But it's just making the li bigger, even though there seems plenty of room to fit the text.

Any ideas?

<ul>
    <li class="padded">x</li>
    <li>x</li>
</ul>​

li {
        width: 25px;
        height: 25px;
        border: solid 1px black;
        display: inline;
        margin: 0 2px 0 0;
        float: left;
}

.padded {
    padding: 3px 0 0 0;
    text-align: center;
}

I get the same results in IE7 and Chrome, not checked any other browser.

Answer 1

The li.padding is growing larger because you have a height of 25px plus a padding-top of 3px.

The you should decrease the height of the li.padding if you want to increase the top-padding, yet have it remain the same height as the plain list item. So to have a 25px high block with 3px padding-top, you should set the height to 22px with a padding of 3px.

li {
        width: 25px;
        height: 25px;
        border: solid 1px black;
        display: inline;
        margin: 0 2px 0 0;
        float: left;
}

.padded {
    padding-top: 3px;
    height:22px /* original height (25px) minus padding-top (3px) */
    text-align: center;
}