非常简单的 html 的意外边距答案

【问题标题】：unexpected margin with very simple html非常简单的 html 的意外边距
【发布时间】：2010-09-23 20:44:32
【问题描述】：

我有一个非常简单的 html。红色 div 位于蓝色 div 内，顶部边距为 10 px。在非 ie 浏览器上，蓝色框距视口顶部 10 px，红色 div 位于蓝色 div 的最顶部。我期望的是 ie 行为：红色 div 必须与蓝色 div 的顶部相距 10 px。为什么非ie浏览器会这样渲染？（我想错误的行为是 IE，但为什么？）

那么，正确的做法是什么？

why blank? http://img92.imageshack.us/img92/7662/blankmr7.jpg

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;    
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

strager's answer 已经尽可能多地解释了它发生的原因——即它在 IE 以外的浏览器中发生的方式是这样的，因为规范是这样说的——我认为他选错了引用the CSS 2.1 specification 部分关于collapsing margins 的内容。

他引用的观点解释了边距如何折叠，而不是它们如何“移动”到父元素。

这就是解释它的原因：

如果框的顶部和底部边距相邻，则边距可能会通过它折叠。在这种情况下，元素的位置取决于它与边距被折叠的其他元素的关系。

如果元素的边距与其父元素的上边距折叠在一起，则框的上边框边缘被定义为与父元素的相同。

或者，在Mozilla developer documentation 中以更易于阅读的形式：

父母和第一个/最后一个孩子：

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度, 或 max-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

至于如何解决它，我可能会选择overflow: auto 解决方案Chris Lloyd suggested（尽可能多的可能有副作用）。

但这真的取决于你的代码的其余部分到底是什么样的。在这个简单的示例中，您可以轻松地将子元素上的 margin 更改为父元素上的 padding。

或者你可以浮动子元素，或者绝对定位它......

或者如果你想变得非常花哨，可以使用逆 clearfix：

.outer:before {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

【讨论】：

是的，我没有做太多研究来回答这个问题。看来你没有我那么懒惰。感谢您的澄清。
我很幸运你得到了错误的报价，否则我会一无所获地研究规格。 ;)

【解决方案2】：

正在合并边距。 IE 产生的输出可能不正确。

在规格中（目前对我来说不合适）：

正常流程折叠中块框的两个或多个相邻垂直边距。生成的边距宽度是相邻边距宽度的最大值。

您可以使用边框代替边距，将边框颜色设置为透明。

【讨论】：

【解决方案3】：

好的，没有自动溢出的解决方案：

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    border: 1px solid transparent;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
    padding: 0;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

内部元素想要推动一些东西，并提供一个边框（或强制浏览器考虑溢出）这样做。

【讨论】：

问题是，现在你有一个 1px 透明边框 :) 如果你将它设置为 1px solid #00f 可能会更好。

【解决方案4】：

可能是 IE 将 DOM 视为 div.inner 将 div.outer 视为它的父节点（并计算它的偏移量），
而其他浏览器反而让它们都响应 body 元素？

【讨论】：

【解决方案5】：

这个问题有一个非常合适的答案：overflow: auto;

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    overflow: auto;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

【讨论】：

这可能会导致滚动条，这可能需要也可能不需要。 -1 表示可能的副作用。
在这种情况下你可以使用溢出：隐藏；
这会导致另一个副作用；如果内容想溢出怎么办？我认为溢出解决方案无论如何都是浏览器中的错误；我在规范中看不到有关溢出和非负边距的任何内容。
以下两组规则确定哪些边距折叠：具有“溢出”而不是“可见”的框的边距不会与其子边距一起折叠。 w3.org/TR/css3-box/#collapsing-margins