填充顶部不起作用

【问题标题】：Padding-top not working填充顶部不起作用
【发布时间】：2013-01-14 07:12:47
【问题描述】：

为什么padding-top 不起作用？ div 的高度已设置。

HTML：

<div class="menu">
    <a href="#">APIE MUS</a>
    <a href="#">REKLAMA</a>
    <a href="#">PARTNERIAI</a>
</div>

CSS：

 .menu {
      width: 300px;
      height: 30px;
      background: red;
 }
 .menu a {
      padding-top: 10px;
 }

【问题讨论】：

你真正想要做什么？（我认为你想要.menu {line-height: 30px;}）你似乎也在交替使用padding-top和margin-top。你真正使用的是哪一个？
尝试从顶部添加 10px 空间，链接将低于 10px
所以：.menu {padding-top: 10px;}?
不，菜单中也可以是文字，10px 仅用于链接

【解决方案1】：

您的示例（带边距）不起作用，因为您无法将边距应用于 a, span, b 等内联元素。

只需添加display:inline-block;

这个值（inline-block）导致一个元素生成一个内联级块容器。内联块的内部被格式化为块框，并且元素本身被格式化为原子内联级框。 来源： http://www.w3.org/TR/CSS2/visuren.html#inline-level

所以这将解决您的问题：

.menu a{
    margin-top: 10px;
    display:inline-block;
}

【讨论】：