在<li> </li>中填充

Question

参见jsFiddle示例here

我正在将padding-top应用于li，以尝试将文字对齐到更靠近底部的位置。但它只是让li更大，尽管似乎有足够的空间来适应文本。

有什么想法吗？

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

我在IE7和Chrome中获得了相同的结果，未检查任何其他浏览器。

Answer 1

li.padding越来越大，因为你有25px的高度加上3px的填充顶部。

如果要增加顶部填充，则应该减小li.padding的高度，但是它与普通列表项保持相同的高度。因此，如果要使用3px填充顶部的25px高块，则应将高度设置为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;
}