CSS 理解关于边界的边距 [英] CSS Understanding margins with respect to borders

问题描述

我试图理解我在处理一些 html 代码时看到的行为，你可以看到 这里.

如果您更改以下内容，您会注意到:

<div style="border: solid 1px black;"><div style="margin-top:50px;">帖子标题

到这个(即边框:实心1像素黑色；"到边框:实心0像素黑色；"):

<div style="margin-top:50px;">帖子标题

内部 div 的边距不再影响外部 div.我一直在寻找定义这种行为的 W3.org 规范，但没有找到.有人愿意帮忙吗?

解决方案

这称为折叠边距".

<块引用>

某些相邻的边距组合成一个边距.那些利润率被称为崩溃".如果没有边距是相邻的非空内容、填充或边界区域或要分隔的间隙

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

一些更简单的阅读:

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

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?

解决方案

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

这篇关于CSS 理解关于边界的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！