html - margin 顶部不起作用

Question

这是 fiddle 链接:https://jsfiddle.net/g2a9bpnd/

这是需要获得 margin top 的 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

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.

解决此问题的一个方法是将 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;