div内的P标签:将margin-top设置为p标签也将父div向下推 [英] P tag inside div: Setting margin-top to p tag pushes parent div down too

问题描述

我一直试图弄清楚为什么在p标签上设置margin-top:100px会使它的父元素降低.我不知道.任何人有任何想法吗?

I have been trying to figure out why setting margin-top: 100px on the p tag brings its parent element down with it. I can't figure it out. Anyone got any ideas?

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模型定义的崩溃边距:

That's because of the collapsing margins of CSS Box model definition:

CSS 2.1 8.3.1折叠边距

在CSS中，两个或多个框的相邻边距(可能是可能不是兄弟姐妹)可以合并形成一个单一的边距.保证金据说以这种方式组合起来会崩溃，并且最终组合保证金被称为合拢保证金.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

根据定义:

内联阻止框的边距不会折叠(即使它们的边距也不会流入儿童).

Margins of inline-block boxes do not collapse (not even with their in-flow children).

因此，将 p 的显示更改为 inline-block ，以避免此行为.

So change the display of p to inline-block to avoid this behavior.

演示: http://jsfiddle.net/HU4pR/4/

这篇关于div内的P标签:将margin-top设置为p标签也将父div向下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！