css - 我的顶部填充在哪里？

Question

我的菜单有 CSS 问题。

通过 CSS，我向 li 添加了填充。

li 有display: inline。

它在我设置为inline-block 时有效，但我想知道为什么它不适用于inline。在我看来，填充应该与内联元素一起使用。

HTML

<header>
<nav>
  <ul id="mainmenu">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#" class="active">Users</a></li>
    <li><a href="#" class="active">Rankings</a></li>
    <li><a href="#" class="active">In the press</a></li>
    <li><a href="#" class="active">Blog</a></li>
  </ul>
</nav>
</header>

CSS

body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }

工作演示

http://jsfiddle.net/4QLmp/

PS浏览器是Chrome Canary

Answer 1

填充在那里，但由于 <li> s 被定义为内联，它们与相同的文本基线对齐。这会切断超出页面边框顶部的顶部填充。如果您确实将 css 更改为:

header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}

这样 <ul>当它被推下时，您会看到填充物。 inline-block 不遵循相同的文本对齐规则，因此所有内容都被下推，因此整个 block 都是可见的。