title: Extra padding/margin added in Firefox when float:left
body: <p>Can anyone help me to understand this please?</p>
  
  <p>You can see the example here:</p>
  
  <p><a href="http://jsfiddle.net/zhsnj/3/" rel="nofollow">http://jsfiddle.net/zhsnj/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rt-block"&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;div class="itemContainer"&gt;
                  &lt;span&gt;Lorem ipsum dolor sit amet&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="clr"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="k2Pagination"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rt-block {
      margin: 10px;
      padding: 15px;
      position:relative;
  }
  
  .itemContainer {float:left;}
  
  .k2Pagination {
      margin: 24px 0 4px;
  }
  
  .clr {
      border: medium none;
      clear: both;
      display: block;
      float: none;
      height: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>In Firefox, there is a gap between the "itemContainer" and the surrounding "rt-block". Other browsers don't have this.</p>
  
  <p>It is fixed by two things: removing the float:left on itemContainer, and also by removing the margin on k2 pagination. I'd prefer not to do either of these things if possible.</p>
  
  <p>Thanks for any help</p>