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

问题描述

我尝试在另一个div中的div上添加margin值。所有工作正常，除了顶值，它似乎被忽略。但为什么？

我的预期：

我得到的是什么： br>

代码：

  #outer {width：500px; height：200px;背景：#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>你好，世界！ < / div>< / div>  

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

#inner 元素的顶部边距 www.w3.org/TR/CSS21/box.html#collapsing-margins\"> collapse 到 #outer 元素的顶部边缘，只留下 #outer 边框完好无损（虽然图片中未显示）。

这些是来自W3C规范的相关要点：

8.3.1折叠边距

在CSS中，两个或多个框的邻接边距不是兄弟姐妹）可以组合形成单个边距。以此方式组合的边缘被称为崩溃，并且所得到的组合边缘被称为已折叠边缘。

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

如果且仅当：

• 两个边界都是


• 没有线框，无间隙，没有填充和边框。


• 都属于垂直 - 相邻框边缘，即形成以下对之一：
  
  
  
  • 盒子的顶部边距和其第一个流入子项的顶部边距
  
  

执行以下任何操作的原因会阻止边距折叠： / p>

• 浮动您的 div 元素


• 制作 div 元素内嵌块


• 设置＃的 溢出 > > > li>


是因为：

• 浮动框和其他任何框之间的边距不会折叠（即使是在浮动框和其流内的孩子之间）。


• 建立新块格式上下文的元素的边距例如浮动和可见以外的溢出元素）不会与其流内的孩子折叠。


• 内联块框的边距不会折叠in-flow children）。

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

水平边距永远不会折叠。

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

The reason why doing any of the following prevents the margin from collapsing:

• Floating either of your div elements
• Making either of your div elements inline blocks
• Setting overflow of #outer to auto (or any value other than visible)

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屋！