額外的邊距/填充從哪裏來？

Question

我有一個非常簡單的佈局現在：

<div class="spacer"> 
<h1>Finalizing Your Account </h1> 
</div> 

<div class="greycont60 greycont"> 
<div class="minispacer"><h5>Almost done! Just a few things left...</h5></div> 
</div> 
<div class="greycont40 greycont"></div> 
<div style="clear:both;"></div> 

這裏是CSS：

.minispacer { 
background: #d9d9d9; 
height:30px; 
width: 300px; 
padding-left:10px; 
} 

.greycont60 { 
width: 56%; 
float: left; 
} 

.greycont40 { 
width: 36%; 
float: right; 
} 

.spacer { 
height:56px; 
background:url(../images/bg2.png) repeat; 
padding:0 10px; 
margin-top:20px; 
margin-bottom:10px; 
} 

.spacer h1 { 
font-size:22px; 
padding-top:4px; 
color:#727272; 
} 

.greycont { 
background-color:#e8e8e8; 
padding:15px; 
margin-bottom:10px; 
} 

現在，這裏是它是如何變成了：

他們爲什麼這麼多空間關於MiniSpacer酒吧？我試圖添加1px的頂部填充，並突然酒吧做了一些瘋狂的事情...

Answer 1

嘗試添加margin：0px;到您的h5標籤。 標題標籤獲取默認的頂部和底部邊距。

謝謝， Aditya