title: HTML about FLOAT
body: <p>Why does this code (with the float property) show an <code>a</code> element bigger than the code without the float property? </p>
  
  <pre><code>&lt;html&gt;
  
     &lt;head&gt;
  
         &lt;style&gt;
  
  
         a {
            float: left; /* this is the property */
            height: 40px;
            line-height: 40px;
            padding-left: 0.8em;
            padding-right: 0.8em;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            background-image: url(images/headerTiny.png);
            background-repeat: repeat;
          }
  
        &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;a href="#"&gt;Box Title&lt;/a&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Sorry for my English, I'm not a native English speaker.</p>