div 内的 P 标签：将 margin-top 设置为 p 标签也会将父 div 向下推

我一直试图弄清楚为什么在 p 标签上设置 margin-top: 100px 会使其父元素随之下降。我想不通。有人有什么想法吗？

http://jsfiddle.net/HU4pR/ http://jsfiddle.net/HU4pR/

HTML:

<div id="Sections">
    <section id="Biography">
        <div class="InnerLeftSection">
            <p class="SectionTitle">Bio<br /><small>About Me</small></p>
        </div>
        <div class="InnerRightSection">
        </div>
    </section>
    <section id="Blah">
        <div class="InnerLeftSection">
            <p class="SectionTitle">Blah<br /><small>Blah blah</small></p>
        </div>
        <div class="InnerRightSection">
        </div>
    </section>
</div>

CSS:

#Sections
{
    width: 100%;
    height: auto;

    margin: -30px auto;
}

    #Sections section
    {
        width: 200px;
        height: 468px;

        float: left;
        margin-right: 15px;

        opacity: 0.9;
    }    


#Sections #Biography .InnerLeftSection
    {
        background-image: url('/Shared/Assets/Images/BioTile.png');
        background-repeat: no-repeat;

        text-align: center;

        width: 100%;
        height: 100%;
    background-color: blue;
    }

        #Sections #Biography .InnerLeftSection p
        {
            font-weight: bold;
        }

            #Sections #Biography .InnerLeftSection p small
            {
                font-weight: normal;
                font-size:0.65em;
            }

    #Sections #Blah .InnerLeftSection
    {
        background-image: url('/Shared/Assets/Images/BlahTile.png');
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        text-align: center;
    background-color: green;
    }

        #Sections #Blah .InnerLeftSection p
        {
            font-weight: bold;
            margin-top: 100px;
        }

            #Sections #Blah .InnerLeftSection p small
            {
                font-weight: normal;
                font-size:0.65em;
            }

那是因为边缘塌陷CSS Box模型定义：

CSS 2.1 8.3.1 折叠边距 http://www.w3.org/TR/CSS2/box.html#collapsing-margins

在 CSS 中，两个或多个框的相邻边距（可能或 可能不是兄弟姐妹）可以组合形成单个边距。边距 以这种方式组合的组合被称为崩溃，并且由此产生的组合 边距称为折叠边距。

从定义来看：

内联块框的边距不会折叠（即使它们的边距也不会折叠） 流入儿童）。

所以改变显示p to inline-block以避免这种行为。

Demo: http://jsfiddle.net/HU4pR/4/ http://jsfiddle.net/HU4pR/4/