Html 为什么这个部门利润率顶部没有按预期工作？_Html_Css_Firefox_Margin

Html 为什么这个部门利润率顶部没有按预期工作？

html css firefox

Html 为什么这个部门利润率顶部没有按预期工作？,html,css,firefox,margin,Html,Css,Firefox,Margin,我正在使用Firefox 8.0.1 页边距顶部未按预期工作，有人能帮忙吗？thx <!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; ch

我正在使用Firefox 8.0.1

页边距顶部

未按预期工作，有人能帮忙吗？thx

<!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>


新边界
#页面{
宽度：980px；
保证金：50px自动；
}
#董事会{
宽度：600px；
高度：400px；
背景颜色：灰色；
}
.细胞{
边框：1px实心；
宽度：50px；
高度：20px；
利润率：30px 5px；
}

因此，

单元格

div中的

页边距顶部

未按预期工作。
我认为应该是

左边距

，将

单元格

div放在

板下

div，但事实并非如此。

这是屏幕截图：

您已将单元格嵌套在board div中。如果需要，请将其放在下面

您可以添加

overflow:hidden;

或

到

#board

css

请参见

我在父元素中添加了“clearfix”类，这为我解决了问题。

我的意思是，边距顶部设置为30px，但它没有显示有30px的边距顶部，对吗？那为什么呢？不知道为什么我的答案会被扣分。我不清楚你的问题。如果你想把它放在那个div里，你可以试着添加一些填充物。嗯，我没有做“标记”…我知道你没有。你试过填充吗？或者上面的建议。应该有效。是的，添加填充顶部或边框顶部将使其有效。thx.我觉得这很有效；将padding top或border top添加到board元素将使其工作这称为折叠边距检查，非常感谢！这让我更清楚了，你能谈谈背后的原因吗？我真的不知道为什么div超过了它的容器。这种情况经常发生在我身上，我想通过添加边框或使用overflow:hidden可以帮助浏览器理解嵌套的div不应该超过它的容器。@hetaoblog原因是thx太多了！这让我更清楚了

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