title: CSS, float:left adds hidden padding?
body: <p>I'm very new to the html5/css universe.
  I'm trying to do something very basic and cannot comprehend why I'm getting the results I am. I would like to add a sidebar to the side of my content. I'm doing this by adding a 310px margin to my content and putting floating my side-content there. Easy!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
    div.sidebar{float:left;width:300px;padding:0;background-color:yellow;}
    div.content{margin-left:310px;background-color:green;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="sidebar"&gt;
  &lt;h1&gt;Sidebar&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
  &lt;h1&gt;Content&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But something odd is happening, there seems to be a 1em padding above and below the sidebar (yellow), but not the content (green). As a consequence the titles "Sidebar" and "Content" are not aligned. I'm just wondering why the float:left automatically added what seems to be padding? And can this padding be removed? padding:0; seems to have no effect.</p>