css - Extra padding/margin added in Firefox when float:left -

can me understand please?

you can see example here:

http://jsfiddle.net/zhsnj/3/

html:

<div class="rt-block">     <div>         <div>             <div class="itemcontainer">                 <span>lorem ipsum dolor sit amet</span>             </div>             <div class="clr"></div>         </div>         <div class="k2pagination">         </div>     </div> </div>  

css:

.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; } 

in firefox, there gap between "itemcontainer" , surrounding "rt-block". other browsers don't have this.

it fixed 2 things: removing float:left on itemcontainer, , removing margin on k2 pagination. i'd prefer not either of these things if possible.

thanks help

first, display see in firefox:

i think have 1 many <div>. when viewing on firefox padding added on first <div> after <div class="rt-block">. guess produces line break causes float float under line, seems confirmed fact adding line-height: 0 div fixes problem.

you can remove <div>:

<div class="rt-block">     <div>         <div class="itemcontainer">             <span>lorem ipsum dolor sit amet</span>         </div>         <div class="clr"></div>     </div>     <div class="k2pagination">     </div> </div>                          

jsfiddle

or can set line height 0 first div:

.rt-block > div {     line-height: 0; } 

jsfiddle

or better, make inline-block:

.rt-block > div {     display: inline-block; } 

jsfiddle