为什么这种CSS边距顶部样式不起作用？

本文翻译自：Why does this CSS margin-top style not work?

I try to add margin values on a div inside another div. 我尝试在另一个div内的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. W3Schools没有解释为什么margin如此行事。

---

#1楼

参考：https://stackoom.com/question/dwXp/为什么这种CSS边距顶部样式不起作用

---

#2楼

What @BoltClock mentioned are pretty solid. @BoltClock提到的内容非常可靠。 And Here I just want to add several more solutions for this problem. 在这里，我只想为这个问题添加更多解决方案。 check this w3c_collapsing margin . 检查这个w3c_collapsing margin 。 The green parts are the potential thought how this problem can be solved. 绿色部分是如何解决此问题的潜在思路。

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:left to either #outer or #inner demo1 . 这意味着我可以将float:left添加到#outer或#inner demo1 。

also notice that float would invalidate the auto in 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: hidden into #outer . 除了visible以外，让我们将overflow: hidden在#outer 。 And this way seems pretty simple and decent. 而且这种方式看起来非常简单和体面。 I like it. 我喜欢。

#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). 内联阻止框的边距不会折叠（即使带有其流入子框也不会折叠）。

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: 30px and a sibling-box has margin-top: 10px . 通常，这表示顶盒的margin-bottom: 30px ，同级的盒margin-top: 10px 。 The total margin between them is 30px instead of 40px . 它们之间的总边距是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. 而且<div>在默认情况下是块级的，因此您不必故意声明它。 Sorry for not being able to post more than 2 links and images due to my novice reputation. 抱歉，由于我的新手声誉，发布的链接和图片不超过2个。 At least you know where the problem comes from next time you see something similar. 至少您知道问题的根源来自下次看到类似的东西。

---

#3楼

Just for a quick fix, try wrapping your child elements into a div element like this - 为了快速修复，请尝试将您的子元素包装成div元素，如下所示-

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Margin of inner div won't collapse due to the padding of 1px in-between outer and inner div. inner div的边距不会由于outer div和inner div之间的1px填充而崩溃。 So logically you will have 1px extra space along with existing margin of inner div. 因此，从逻辑上讲，您将拥有1px额外空间以及inner div的现有边距。

---

#4楼

Try using display: inline-block; 尝试使用display: inline-block; on the inner div. 在内部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;
}

---

#5楼

Not exactly sure why, but changing the inner CSS to 不确定原因，但将内部CSS更改为

display:inline-block;

seems to work; 似乎有效；

---

#6楼

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). 你实际看到的上边距#inner元素崩溃到的顶部边缘#outer元素，只留下#outer保证金完整（虽然你的图片未显示）。 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: 以下是W3C规范的相关要点：

8.3.1 Collapsing margins 8.3.1利润下降

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. 在CSS中，两个或多个框（可能是兄弟姐妹，也可能不是兄弟姐妹）的相邻边距可以合并为一个边距。 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, ie 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 浮动您的任何div元素
• Making either of your div elements inline blocks 使任一div元素内联块
• Setting overflow of #outer to auto (or any value other than visible ) 将#outer overflow设置为auto （或除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. 水平边距永远不会崩溃。