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

标签 html css firefox margin

<分区>

我使用的是 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 下,但事实并非如此。

这是屏幕截图: enter image description here

最佳答案

可以添加

overflow:hidden;

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

#board css。

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

关于html - 为什么这个 div margin-top 没有按预期工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9224503/

相关文章:

css - 我应该如何使我 body 的整个背景变暗?

javascript - HTML - 页面的全高,包括滚动之外的内容

javascript - 调用 Javascript 函数的 Href 链接打开一个新选项卡并且在 Firefox 中不起作用

jquery - 使用 JQuery 将数字变量连接到输入字段上的数字

html - 如何在 CSS 网格系统中偏移 div 列

java - 如何在 Java 中转换 HTML 实体

html - 居中一个装满 div 的容器

javascript - Bootstrap 4 导航栏右对齐搜索选项以及注册

css - 可变网格间隙使网格父元素的填充侵入网格元素

python - Firefox 附加组件 SDK 错误