What assigning my navigation bar an equal top and bottom margin?

Question

I have a navigation bar made from an unordered list:

<div id="header">
  <ul id="nav"> 
    <li><%= link_to "home", "#" %></li>
    <li><%= link_to "work", "#" %></li>
    <li><%= link_to "team", "#" %></li>
    <li><%= link_to "contact", "#" %></li>
  </ul> 

  <div style="clear: both"></div>
</div>

With only the following css:

#nav{
    margin: 0px;
    width: 400px;
    list-style: none;
    float: right;
}

The browser is giving it a top and bottom margin of 16px, when I haven't told it to:

I am using a rails-style framework, "middleman", but I doubt that is causing. Does anyone know where it is coming from?

Answer 1

<ul></ul> element gives you this top and bottom margin :

ul.nav{
    margin: 0 auto; /*reduce top and bottom margin to 0 and set left-right to auto*/
}