意外的边距与非常简单的html [英] unexpected margin with very simple html
问题描述
我有一个非常简单的html。红色div在蓝色div内，有一个10像素的顶部边距。在非ie浏览器上，蓝色框距离视口顶部10 px，红色div位于蓝色div的顶部。我所期望的是ie行为：红色div必须与蓝色div的顶部相距10 px。为什么非ie浏览器渲染这样？ （我想错误的行为是IE的，为什么？）
I have a very simple html. The red div is inside the blue div and has a 10 px top margin. On non-ie browsers, the blue box is 10 px apart from the top of viewport and the red div is at the very top of the blue div. What I expect is the ie behavior: red div must be 10 px apart from the top of the blue div. Why does non-ie browsers render like this? (I suppose the wrong behavior is the IE's but why?)
这是正确的方法是什么？
And, what is the correct way to do this?
<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>
推荐答案
/stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html#315759\"> strager的回答已经说明了您需要知道的为什么会发生这种情况，也就是说，它在IE以外的浏览器中的方式，因为规格说这样 - 我认为他从关于折叠边距的CSS 2.1规范 < a>。
As much as strager's answer already explains about as much as you need to know as to why it happens – namely that it happens the way it does in browsers other than IE because the specs say so – I think he picked the wrong quote from the section of the CSS 2.1 specification about collapsing margins.
他引用的内容解释了页边距可以如何折叠，而不是如何移动到父元素。
The point he quoted explains how margins can collapse, not how they can "move" to a parent element.
这是什么解释它：
- 如果一个盒子的顶部和底部边距是相邻的，则边缘可能通过它折叠。在这种情况下，元素的位置取决于其与其边缘被折叠的其他元素的关系。
- 如果元素的边距与其父上边距折叠，则框的顶边框边缘被定义为与父元素相同。
父级和第一个/最后一个子级：
如果没有边框，填充，用于将块的margin-top与其第一个子块的margin-top分隔开的间隙，或者没有边框，padding，inline content，height，min-height或max-height，以将块的margin-bottom其最后一个孩子的边缘底部，那么这些边缘崩溃。
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
至于如何解决这个问题，我可能会选择 overflow：auto 解决方案 Chris Lloyd建议< a>（尽可能多的副作用）。
As for how to fix it, I'd probably go for the overflow: auto solution Chris Lloyd suggested (as much as that may have side-effects).
但这确实取决于你的代码的其余部分是什么样子。在此简单示例中，您可以轻松地将子元素上的 margin 更改为父元素上的 padding 。
But then that really depends on what exactly the rest of your code looks like. In this simple example you could easily just change the margin on the child element to a padding on the parent element.
或者你可以浮动子元素，或者绝对定位它...
Or you could float the child element, or absolutely position it...
或者一个反转 clearfix 如果你真的想：
Or how about an inverse clearfix if you want to get really fancy:
.outer:before {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
这篇关于意外的边距与非常简单的html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
