为什么设置子元素的上边距会将其父容器一起向下推？

Question

I have two divs:

<div id="headercontainer" data-type="background" data-speed="5"> 
    <div id="headersubcontainer">
        <h1>Simple and Cost Effective Web Solutions</h1>  
    </div> 
</div>

<div id="teamcontainer" data-type="background" data-speed="5"> 
    <div id="teamsubcontainer"> 
        <h1>Developed by a dedicated team</h1> 
    </div> 
</div> 

两个元素都具有100%的宽度和高度，为800像素。第一个标题我设置了top-margin: 160px。但是它没有向下移动到其父div中，而是将父div一起向下移动。您可以在这张图片中看到：

以下是相关CSS：

h1{
    font-size: 48px;
    font-family: $header-font-stack; 
    font-weight: 100;
    width: 400px;
}

#headercontainer{
    width: 100%; 
    height: 800px;
    background-image: image-url("background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
}

#headercontainer h1{
    text-align: center;
    margin: 0px auto;
    margin-top: 160px;
    color: #610B21;
}

使用内边距显然可以达到效果，但我更想用外边距进行设置。如何设置上边距并将标题下移至容器内，而不将容器一起移动？

- Sam D20

---

我认为这是因为父元素的高度被设置为一个固定值。边距和填充会加上高度和宽度。 - scripter

可能是Margin-Top push outer div down的重复问题。 - Jesús Carrera

Answer 1

这是由于外边距折叠引起的：

块级元素的上下外边距有时会合并（折叠）成一个外边距，其大小为合并在一起的外边距中最大的那个，这种行为称为外边距折叠。

这导致父元素反向继承了子元素的上外边距。

您可以通过在子元素之前添加 来防止这种情况发生

演示Fiddle

....或者对父元素应用以下任何一项：

1. float: left / right
2. position: absolute
3. display: inline-block

如果将父元素设置为100%宽度，则将display:inline-block;添加到父元素可能是首选

演示Fiddle

- SW4

---

我应该把它添加到哪里？它具体是做什么的？ - Sam D20

请参见：http://jsfiddle.net/swfour/y3mS6/，然后我可能会选择父元素的后3个设置之一。 - SW4

还可以看看这个网站：http://960development.com/understand-css-margins-collapsing/ - SW4

这应该被标记为正确答案，已经超过1年了。 - am05mhz

根据这个答案，你也可以设置：4.overflow:auto，或者5.margin:-1px; padding:1px。 - Stijn de Witt

Answer 2

只需在父元素中添加一些顶部填充，即使是1像素也可以解决此问题。

- xatzistnr

Answer 3

只需要在父元素上使用box-sizing: border-box;，然后在那里设置padding而不是margin-top。这样可以帮助您在所有边缘保持一致的间距。

JSFIDDLE

- jmore009

Answer 4

我认为这个答案更好：

https://dev59.com/B3E85IYBdhLWcg3wpFIa#49075574

是的，我知道这是我的答案，但我认为重要的是我们不要随意添加填充、更改盒模型大小、在DOM中添加虚假元素或仅为了修复显示问题而更改显示/填充。这些解决方案都会带来自己的问题：SEO 更糟糕，尝试做其他事情时无法预测的盒模型行为，位置和显示更改引起的烦恼等。这个解决方案对于 SEO 很好，可扩展，并且在尝试使用元素进行其他操作时没有其他实际效果。

- dudewad

---

更好，同意任何其他更改DOM的方式都会变得奇怪。 - HughHughTeotl