html - div 的 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