問題與divs之間的無用空間

Question

我有一些空間，我不想在課間。

這裏有一個小提琴：http://jsfiddle.net/4YSXv/

應該是中間沒有任何空格框：

我無法弄清楚如何消除這個空間，我GOOGLE了它，當然顯然這是一個常見問題，但我找到的所有解決方案都無濟於事。

HTML

 <div class='image'> 
     </div> 
     <div class='line1'> 
     </div> 
     <div class='head'> 
     </div> 
     <div class='subBox'> 
      <div class='sub'></div> 
      <div class='price'></div> 
      <div class='button'></div> 
     </div> 
     <div style='clear:both;'></div> 

     <div class='line2'> 
     </div> 
     </div> 
</div> 
<div class='placeholder'> 
</div> 

CSS

.headerimage { 
    position:absolute; 
    left:0px; 
    right:0px; 
    height:273px; 
    background-color:#000000; 
} 
.box1 { 
    position:relative; 
    top:273px; 
} 
.produkt { 
    width:224px; 
    height:318px; 
    position:relative; 
    float:left; 
} 
.image { 
    width:224px; 
    height:230px; 
    background-color:#afeeee; 
    position:relative; 
} 
.line1 { 
    width:224px; 
    height:1px; 
    background-color:#000000; 
    position:relative; 
} 
.head { 
    width:224px; 
    height:25px; 
    background-color:#eeeeee; 
    position:relative; 
} 
.subBox { 
    width:224px; 
    height:50px; 
    position:relative; 
} 
.sub { 
    width:224px; 
    height:25px; 
    position:relative; 
} 
.price { 
    width:160px; 
    height:20px; 
    background-color:#847077; 
    position:relative; 
    float:left; 
} 
.button { 
    width:58px; 
    height:20px; 
    background-color:#6A5ACD; 
    position:relative; 
    float:left; 
} 
.line2 { 
    width:224px; 
    height:5px; 
    background-color:#000000; 
    position:relative; 
    padding-bottom:20px; 
} 
.placeholder { 
    height:800px; 
    width:800px; 
    position:relative; 
    padding-top:1000px; 
} 

Answer 1

.sub { 
    width: 224px;  
    position: relative;  
} 

您從.SUB的高度得到20像素的白色空間

的

.subBox { 
width: 224px; 
height: 20px; 
position: relative; 
} 

Answer 2

.subBox { 
    position: relative; 
    width: 224px; 
} 
.sub { 
    position: relative; 
    width: 224px; 
}