额外的保证金/填充来自哪里?

时间:2012-07-13 14:02:42

标签: html css-float margin padding

我现在有一个非常简单的布局:

<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 个答案:

答案 0 :(得分:1)

尝试添加保证金:0px;到 h5 标记。 标题标签获得默认的上下边距。

谢谢, 阿迪亚