额外的边距/填充从哪里来？

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