为啥这个 div margin-top 没有按预期工作？ [复制]
Posted
技术标签:
【中文标题】为啥这个 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 非常感谢！这让我更清楚 【参考方案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 将使其工作。谢谢。以上是关于为啥这个 div margin-top 没有按预期工作？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
div中设置背景图片，这个div中再嵌套一个div，并且设置margin-top为啥嵌套的块会移出去