title: Why is this div's calculated height more than its content?
body: <p>I'm a CSS novice working on a WordPress site using the <a href="http://wordpress.org/extend/plugins/menubar/" rel="nofollow noreferrer">Menubar plugin</a> for the navigation.  I've been able to make changes to my CSS for color scheme, centering, and font stuff, but I cannot for the life of me figure out why the div that surrounds the <code>&lt;ul&gt;</code> for the menu has an extra 6 pixels at the bottom.  I've tried setting the margin to 0 in several places, changing the <code>line-height</code>...but nothing works.  </p>
  
  <p><img src="https://i.stack.imgur.com/DA76s.png" alt="enter image description here"></p>
  
  <p>You can view the site <a href="http://classaction.halunenlaw.net" rel="nofollow noreferrer">here</a>.  The theme I'm using is a child of Twenty Eleven.  Here's (I think) the CSS that matters:</p>
  
  <pre><code>#access div {
      margin: 0 0 0 0;
  }
  #access {
      background: #773736; 
      clear: both;
      display: block;
      margin: 0 auto; 
      width: 100%;
      text-align: center;
  }
  #access ul {
      font-size: 13px;
      list-style: none;
      margin: 0 0 0 -0.8125em;
      padding-left: 0;
      display: inline-block;
      font-weight: normal;
  }
  #access li {
      float: left;
      position: relative;
      text-align: left;
  }
  #access a {
      color: #eee;
      display: inline-block;
      line-height: 3.333em;
      padding: 0 1.2125em;
      text-decoration: none;
      font-weight: normal;
  }
  </code></pre>
  
  <p>What do I have to do to get rid of this extra height?</p>