Filling in <li>

Question

see jsFiddle example here

I apply padding-topto lito try to align the text closer to the base. But it just does limore, although there seems to be enough space 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, but have not tested any other browser.

Answer 1

li.padding grows bigger because you have a height of 25 pixels plus the top of 3px.

li.padding, , , . , 25px 3px padding-top, 22px 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;
}