Question

I have an CSS issue with a menu.

Through CSS I´ve added padding to li‘s.

The li‘s have display: inline.

It works when I set to inline-block, but I want to know why it doesn’t work with inline. In my understanding padding should work with inline elements.

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

Working demo

http://jsfiddle.net/4QLmp/

PS browser is Chrome Canary

Answer 1

The padding is there, but since the <li>s are defined as inline, they’re aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:

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

so that the <ul>s get pushed down, you’ll see the padding present. inline-block doesn’t follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.