Html 在 <li> 中填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3805123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Padding in <li>
提问by fearofawhackplanet
see jsFiddle example here
在此处查看 jsFiddle 示例
I'm applying padding-topto an lito try to align the text nearer to the bottom. But it's just making the libigger, even though there seems plenty of room to fit the text.
我正在申请padding-topali以尝试将文本对齐到更靠近底部的位置。但这只是使li更大，即使似乎有足够的空间来容纳文本。
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.
我在 IE7 和 Chrome 中得到相同的结果，没有检查任何其他浏览器。
回答by matthughes404
The li.padding is growing larger because you have a height of 25px plus a padding-top of 3px.
li.padding 越来越大，因为你有 25px 的高度加上 3px 的 padding-top。
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.padding 的高度，但让它保持与普通列表项相同的高度。所以要有一个 25px 高的块和 3px padding-top，你应该将高度设置为 22px，padding 为 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;
}
