Question

我正在使用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>

因此，margin-top div中的cell无效。
我认为将margin-left div放在cell div下面应该是board，但事实并非如此。

这是截图： enter image description here

Answer 1

您可以添加

overflow:hidden;

或

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

致#board css。

请参阅http://jsfiddle.net/3QfWS/

Answer 2

我添加了＆＃34; clearfix＆＃34;类的父元素为我解决了问题。

Answer 3

你已经嵌入了div中的单元格。如果你想在下面把它放在外面。

为什么这个div margin-top没有按预期工作？

3 个答案: