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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

所以,margin-top在celldiv中没有按预期工作.
我认为应该将div margin-left放在celldiv之下board,但事实并非如此.

这是截图: 在此输入图像描述

Answer 1

Cri*_*sty 7

你可以加

overflow:hidden;

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

要#boardcss.

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

@hetaoblog原因是http://www.w3.org/TR/CSS21/box.html#collapsing-margins (2认同)

归档时间：	13 年，7 月前
查看次数：	9143 次
最近记录：	10 年，12 月前