2012-07-13 55 views
0

我有一個非常簡單的佈局現在:額外的邊距/填充從哪裏來?

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

現在,這裏是它是如何變成了:

enter image description here

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

+1

JSFiddle將在這裏有所幫助。 – 2012-07-13 14:05:36

回答

1

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

謝謝, Aditya