CSS Understanding margins with respect to borders

问题

I'm trying to understand a behavior I've seen when I was messing around with some html code you can see here.

You'll notice that if you change the following:

<div style="border: solid 1px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

to this (ie. "border: solid 1px black;" to "border: solid 0px black;"):

<div style="border: solid 0px black;">
    <div style="margin-top:50px;">
        Post Title
    </div>
</div>

the margin of the inner div does not effect the outer div any longer. I've been trying to find the W3.org specification which defines this behavior, but no luck. Anyone want to help?

回答1:

This is called "collapsing margins".

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

• http://www.w3.org/TR/CSS2/box.html#collapsing-margins
• http://www.w3.org/TR/css3-box/#collapsing-margins

Some easier reads:

• http://reference.sitepoint.com/css/collapsingmargins
• http://www.howtocreate.co.uk/tutorials/css/margincollapsing

来源：https://stackoverflow.com/questions/8197927/css-understanding-margins-with-respect-to-borders