为什么这个 CSS margin-top 样式不起作用? [英] Why does this CSS margin-top style not work?

问题描述

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

我的预期:

我得到了什么:

代码:

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

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

W3Schools 没有解释为什么保证金会这样.

解决方案

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

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

<块引用>

8.3.1 折叠边距

在 CSS 中，两个或多个盒子(可能是也可能不是兄弟)的相邻边距可以组合形成一个边距.以这种方式组合的边距称为折叠，由此产生的组合边距称为折叠边距.

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

<块引用>

两个边距相邻当且仅当:

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

您可以执行以下任一操作来防止边距塌陷:

<块引用>

• 浮动任何一个 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.

这篇关于为什么这个 CSS margin-top 样式不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！