Html 填充<；李>；

请参阅JSFIDLE示例

我正在将

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

x
x
​
李{
宽度：25px；
高度：25px；
边框：实心1px黑色；
显示：内联；
边距：02px0；
浮动：左；
}
.软垫{
填充：3px0；
文本对齐：居中；
}

---

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

li.padding越来越大，因为你有25像素的高度加上3像素的padding top

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