CSS的上边距

Question

我正在写一个网站，我有一些保证金问题。

我有以下HTML代码：

<div id="mainBody">
    <div class="subTitle" id="backgroundTitle" >
        <h3>
            Background
        </h3>
    </div>
</div>

我的CSS代码如下：

#mainBody{
    height:200px;
    width: 500px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}


.subTitle {
    margin-top=0px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


h3 {
    margin-top:100px;
    margin-bottom:0px;
}

我期待的结果是“mainBody”div具有0px的上边距，而h3内部具有100px的上边距。但是，我得到的是“mainBody”div与h3一起向下移动，这意味着它们相对于页面顶部都有100px的上边距。

有谁知道为什么会这样？

非常感谢！

Answer 1

将display:inline-block;添加到h3元素类。

h3 {
    margin-top:100px;
    margin-bottom:0px;
    display:inline-block;
}

Js Fiddle Demo

Answer 2

我没有看到任何问题！请参阅Fiddle。我为元素添加了边框，以清楚地看到元素位置。

注意：我已经在Ubuntu 12.04 LTS上测试了FF 26.0，Chrome 32.0。

它的外观如下：

我添加了边框以查看元素边界：

#mainBody{
    ...
    border:1px solid red;
}

.subTitle {
    ...
    border:1px solid green;
}


h3 {
    ...
    border:1px solid blue;
}

Answer 3

在工作流程中，您需要删除折叠，因为您可能需要此http://nicolasgallagher.com/micro-clearfix-hack/

Answer 4

我不确定你真的需要<h3> - 你可以在副标题中设置文字样式。

CSS

#mainBody{
    height:200px;
    width: 500px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}
.subTitle {
    margin-top=0px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    border: 1px solid red;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    border-top: 6px solid red;
}

HTML

<div id="mainBody">
    <div class="subTitle" id="backgroundTitle" >
      Background
    </div>
</div>

FIDDLE