为什么这种 CSS margin-top 样式不起作用?

我尝试在另一个 div 中的 div 上添加边距值.除了最高值外，一切正常，它似乎被忽略了.但为什么呢?

我的预期:

我得到了什么:

代码:

#outer {宽度:500px；高度:200px；背景:#FFCCCC；边距:50px 自动 0 自动；显示:块；}#内在{背景:#FFCC33；边距:50px 50px 50px 50px；填充:10px；显示:块；}

<div id="outer"><div id="内部">你好世界！</div></div>

W3Schools 没有解释为什么 margin 会这样.

解决方案

您实际上看到的是 #inner 元素 collapse 到 #outer 元素的上边缘，只留下 #outer 边距完好无损(尽管未在您的图像中显示).两个框的上边缘彼此齐平，因为它们的边距相等.

以下是 W3C 规范中的相关要点:

<块引用>

8.3.1 折叠边距

在 CSS 中，两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合成一个边距.以这种方式组合的边距称为collapse，而得到的组合边距称为collapsed margin.

相邻的垂直边距折叠[...]

<块引用>

两个边距相邻当且仅当:

• 两者都属于参与相同块格式化上下文的流入块级框
• 没有线框，没有间隙，没有填充，也没有边框将它们分开
• 两者都属于垂直相邻的框边，即形成以下对之一:
  • 框的上边距及其第一个流入子元素的上边距

您可以执行以下任何操作来防止边距折叠:

<块引用>

• 浮动您的任一 div 元素
• 使您的任一 div 元素内联块
• 将 #outer 的 overflow 设置为 auto(或 visible 以外的任何值)

上述选项阻止边距折叠的原因是:

<块引用>

• 浮动框和任何其他框之间的边距不会折叠(即使浮动框与其流入的子级之间也不会折叠).
• 建立新块格式上下文的元素(例如浮动和具有溢出"而不是可见"的元素)的边距不会与其流入的子元素一起折叠.
• 内联块框的边距不会折叠(即使是它们的流入子级也不折叠).

左右边距的行为符合您的预期，因为:

<块引用>

水平边距永远不会塌陷.

I try to add margin values on a div inside another div. All works fine except the top value, it seems to be ignored. But why?

What I expected:

What I get:

Code:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools have no explanation to why margin behave this way.

解决方案

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

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.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  • top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

• Float either of your div elements
• Make either of your div elements inline blocks
• Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.