Question

我试图将margin设置为内部div（“main”），但它不起作用，有时它会推动外部div（“news_wrapper”）。

这是需要获得保证金最高的div：

#main {
  margin-top:30px;
  background-color: #FFF;
  padding: 0 30px 0 28px;
  border-radius: 4px;
  text-align: left; 
  color: #494949;
  border: 1px solid #d0d1d3;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0px auto;
  width: 150px;
  padding: 23px;
  min-height: 350px;
  height: auto;
}

Answer 1

这是因为利润率下降。

8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

解决此问题的一个方法是将overflow: hidden添加到元素#news_wrapper。这样做会建立new block formatting context。

Updated Example

#news_wrapper {
  width: 100%;
  width: 600px;
  height: 100%;
  min-height: 800px;
  margin: 0 auto;
  background-color: #34353A;
  overflow: hidden;
}

作为旁注，margin: 0px auto覆盖了margin-top: 30px。

在之后添加margin-top ，

margin: 0 auto; margin-top: 30px;

..或使用速记：

margin: 30px auto 0;

Answer 2

您定义了2次保证金

margin-top:30px;

和

margin: 0px auto;

后面的定义将覆盖前一个定义，因此没有边距

如果你需要集中精力

margin: 30px auto 0 auto;

简写

margin: 30px auto 0;

最后auto可以省略

https://jsfiddle.net/g2a9bpnd/2/

对于那个推动的问题，你被提到，这个边缘崩溃了

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

相邻的垂直边距会崩溃，除了：
Margins of the root element's box do not collapse.
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of
跟随兄弟姐妹，但结果边缘不会崩溃   父块的下边距。

水平边距永不崩溃。

保证金顶部不起作用

2 个答案: