Html 为什么这个 CSS margin-top 样式不起作用？

Why does this CSS margin-top style not work?

提问by jamietelin

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?

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

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>

W3Schoolshave no explanation to why margin behave this way.

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

回答by BoltClock

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

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

Here are the relevant points from the W3C spec:

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

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 [...]

8.3.1 折叠边距

在 CSS 中，两个或多个盒子（可能是也可能不是兄弟）的相邻边距可以组合形成一个边距。那这种方式结合的利润率是说崩溃，并将得到的组合边际被称为倒塌保证金。

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

Two margins are adjoiningif 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 divelements
• Make either of your divelements inline blocks
• Set overflowof #outerto auto(or any value other than visible)

• 浮动任何一个div元素
• 使您的任一div元素内联块
• 设置overflow的#outer对auto（或任何值以外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).

• 浮动框和任何其他框之间的边距不会折叠（甚至在浮动框与其流入的子框之间也不折叠）。
• 建立新块格式上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子项一起折叠。
• inline-block box 的边距不会塌陷（即使是它们的 in-flow 子项也不塌陷）。

The left and right margins behave as you expect because:

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

Horizontal margins never collapse.

水平边距永远不会塌陷。

回答by enderskill

Try using display: inline-block;on the inner div.

尝试display: inline-block;在内部 div 上使用。

#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:inline-block;
}

回答by Qiang

What @BoltClock mentioned are pretty solid. And Here I just want to add several more solutions for this problem. check this w3c_collapsing margin. The green parts are the potential thought how this problem can be solved.

@BoltClock 提到的内容非常可靠。在这里我只想为这个问题添加更多的解决方案。检查这个w3c_collapsing margin。绿色部分是如何解决这个问题的潜在想法。

Solution 1

解决方案1

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

浮动框和任何其他框之间的边距不会折叠（甚至在浮动框与其流入的子框之间也不折叠）。

that means I can add float:leftto either #outeror #innerdemo1.

这意味着我可以添加float:left到#outer或#innerdemo1。

also notice that floatwould invalidate the autoin margin.

还请注意，float这将使auto保证金无效。

Solution 2

解决方案2

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.

建立新块格式上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子项一起折叠。

other than visible, let's put overflow: hiddeninto #outer. And this way seems pretty simple and decent. I like it.

比其他的visible，让我们把overflow: hidden进入#outer。这种方式看起来非常简单和体面。我喜欢。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Solution 3

解决方案3

Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

绝对定位的盒子的边距不会塌陷（即使它们的流入子容器也不塌陷）。

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

or

或者

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

these two methods will break the normal flow of div

这两种方法会破坏正常的流程 div

Solution 4

解决方案4

Margins of inline-block boxes do not collapse (not even with their in-flow children).

inline-block box 的边距不会塌陷（即使是它们的 in-flow 子项也不塌陷）。

is the same as @enderskill

与@enderskill 相同

Solution 5

解决方案5

The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

流入块级元素的底部边距总是与其下一个流入块级兄弟元素的顶部边距折叠，除非该兄弟元素有间隙。

This has not much work to do with the question since it is the collapsing margin between siblings. it generally means if a top-box has margin-bottom: 30pxand a sibling-box has margin-top: 10px. The total margin between them is 30pxinstead of 40px.

这与问题没有太大关系，因为它是兄弟姐妹之间的折叠边距。这通常意味着如果顶盒具有margin-bottom: 30px并且兄弟盒具有margin-top: 10px。它们之间的总边距30px不是40px。

Solution 6

解决方案 6

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

如果元素没有顶部边框、顶部填充并且子元素没有间隙，则流入块元素的顶部边距与其第一个流入块级子元素的顶部边距折叠。

This is very interesting and I can just add one top border line

这很有趣，我可以添加一条顶部边框线

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

And Also <div>is block-level in default, so you don't have to declare it on purpose. Sorry for not being able to post more than 2 links and images due to my novice reputation. At least you know where the problem comes from next time you see something similar.

而且<div>默认情况下也是块级的，所以你不必特意声明它。抱歉，由于我的新手声誉，无法发布超过 2 个链接和图像。至少你下次看到类似的东西时知道问题出在哪里。

回答by Brandon

Not sure why what you have doesn't work, but you can add

不知道为什么你所拥有的不起作用，但你可以添加

overflow: auto;

overflow: auto;

to the outer div.

到外部 div。

回答by bookcasey

If you add any padding to #outer, it works.

如果您向 中添加任何填充#outer，它就会起作用。

Demo

演示

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

回答by harriyott

Not exactly sure why, but changing the inner CSS to

不完全确定为什么，但将内部 CSS 更改为

display:inline-block;

seems to work;

似乎工作;

回答by Dave

Doesn't answer the "why" (has to be something w/ collapsing margin), but seems like the easiest/most logical way to do what you're trying to do would be to just add padding-topto the outer div:

不回答“为什么”（必须是带有折叠边距的东西），但似乎最简单/最合乎逻辑的方法就是添加padding-top到外部 div：

http://jsfiddle.net/hpU5d/1/

http://jsfiddle.net/hpU5d/1/

Minor note - it shouldn't be necessary to set a div to display:block;unless there's something else in your code telling it not to be block.

小注 -display:block;除非您的代码中有其他内容告诉它不要被阻止，否则没有必要将 div 设置为。

回答by Mustafa M Jalal

try this:

尝试这个：

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

http://jsfiddle.net/7AXTf/

http://jsfiddle.net/7AXTf/

Good luck

祝你好运

回答by viditkothari

I guess setting the positionproperty of the #innerdiv to relativemay also help achieve the effect. But anyways I tried the original code pasted in the Question on IE9 and latest Google Chrome and they already give the desirable effect without any modifications.

我想将#innerdiv的position属性设置为relative也可能有助于达到效果。但无论如何，我尝试了粘贴在 IE9 和最新版 Google Chrome 上的问题中的原始代码，并且它们已经在没有任何修改的情况下提供了理想的效果。

回答by Ata Iravani

Use padding-top:50pxfor outer div. Something like this:

使用padding-top:50px的外层div。像这样的东西：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Note: padding will increase the size of your div. In this case if the size of your div is important, I mean if it must have a specific height. decrease the height by 50px.:

注意：填充会增加 div 的大小。在这种情况下，如果 div 的大小很重要，我的意思是它是否必须具有特定的高度。将高度降低 50px。：

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}