html - 填充顶部不起作用

Question

为什么不起作用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;
 }

Answer 1

您的示例（带边距）不起作用，因为您不能将边距应用于内联元素，例如a, span, b.

看一看：

• http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
• http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

要解决您的问题：

只需添加display:inline-block;

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

因此，这将解决您的问题：

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