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

Question

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

htmlmargincss

425

我试图在一个嵌套的

中添加margin值。除了顶部值似乎被忽略外，一切都正常。但是为什么呢？

我的期望：

实际效果：

代码：

#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没有解释为什么margin会以这种方式行为。

- jamietelin

5

你尝试过让内部的浮动吗？ - Rooster

9

嗯，使用“float:left;”就可以了...但为什么需要这样做呢？我不想让它浮动。而且为什么左/右边距有效呢？ - lejahmie

69

欢迎来到 CSS 外边距折叠算法的有趣世界！ - GordonM

3

你什么都不知道，琼·雪。 - lejahmie

4

我记不得 CSS 何时变得如此复杂了。它只是用于显示元素，但我看到许多人在与它斗争。学习它并不像你可以轻松掌握，而是需要“研究”它。 - Jonny

显示剩余3条评论

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- viditkothari · Answer 1

我猜将#inner div的position属性设置为relative也可以帮助实现效果。但是无论如何，我在IE9和最新的Google Chrome中尝试了问题中粘贴的原始代码，它们已经在没有任何修改的情况下获得了理想的效果。

- atgr24869 · Answer 2

你尝试过在所有样式前加上 !important 吗？它会强制应用所有样式：

margin:50px 50px 50px 50px !important;

- Jackie Santana · Answer 3

如果您遇到了边距折叠问题，可以通过将display: flow-root;添加到父容器来解决。

此外，如果margin-top被忽略，请尝试使用负值的margin-top，例如：margin-top: -2px;

- Mithilesh Tipkari · Answer 4

如果只是为了快速解决问题，请尝试将您的子元素包装在 div 元素中，像这样 -

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

inner div的margin不会因为outer和inner div之间的1px padding而折叠。所以从逻辑上讲，你将会有额外的1px空间，加上inner div现有的margin。