为什么这个 div margin-top 没有按预期工作？ [复制]答案

【问题标题】：Why is this div margin-top not working as expected? [duplicate]为什么这个 div margin-top 没有按预期工作？ [复制]
【发布时间】：2012-03-02 17:29:33
【问题描述】：

我使用的是 Firefox 8.0.1

margin-top 没有按预期工作，有人可以帮忙吗？谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
          <title>New Border</title>

          <style type="text/css">
               #page {
                    width:980px;
                    margin: 50px auto;
               }

               #board {
                    width:600px;
                    height:400px;
                    background-color: gray;
               }

               .cell {
                    border: 1px solid;
                    width:50px;
                    height:20px;
                    margin: 30px 5px;
               } 
          </style>
     </head>
     <body>
          <div id="page">
               <div id="board">
                    <div class="cell">
                    </div>
               </div>
          </div>
     </body>
</html>

因此，cell div 中的margin-top 没有按预期工作。
我认为应该是margin-left，将cell div 放在board div 下，但事实并非如此。

这是屏幕截图：

【问题讨论】：

我发现这行得通；将 padding-top 或 border-top 添加到板元素将使其工作blog.highub.com/css/css-hacks/…
这叫做折叠边距检查这个w3.org/TR/CSS21/box.html#collapsing-margins，reference.sitepoint.com/css/collapsingmargins
非常感谢！这让我更清楚

标签： html css firefox margin

【解决方案1】：

你可以添加

overflow:hidden;

或

border:1px solid rgba(0,0,0,0); /*or*/ border:1px solid transparent;

致#boardcss。

见http://jsfiddle.net/3QfWS/

【讨论】：

thx，能说说背后的原因吗？
好吧，我真的不知道为什么 div 超出了它的容器。这种情况经常发生在我身上，我猜想通过添加边框或使用溢出：隐藏有助于浏览器理解嵌套的 div 不应该超过它的容器。
@hetaoblog 原因是w3.org/TR/CSS21/box.html#collapsing-margins
非常感谢！这让我更清楚

【解决方案2】：

我将“clearfix”类添加到为我解决问题的父元素中。

【讨论】：

【解决方案3】：

您已将单元格嵌套在板 div 中。如果你想要它，把它放在外面。

【讨论】：

好吧，我的意思是，margin-top 设置为 30px，但它并没有显示有 30px margin-top，对吧？那为什么呢？
不知道为什么我的答案会被扣分。你的问题不清楚。如果你想在那个 div 中添加它，你可以尝试添加一些填充。
好吧，我没有做'mark down'...
我知道你没有。你试过填充吗？或者上面的溢出建议。应该工作。
是的，添加 padding-top 或 border-top 将使其工作。谢谢。