sub div margin top

Question

HTML

<div class="wrap">
    <div class="sub">sub</div>
</div>  

CSS

.wrap {
    width: 100px;
    height: 100px;
    background: #565656;
}

.sub {
    background: red;
    margin-top: 100px;
}

为什么sub div的边距相对于body而不是自身相对包裹？ （可能是有史以来最愚蠢的问题，但我没有得到＆gt;＆lt;） http://jsfiddle.net/QJug3/

Answer 1

欢迎来到崩溃利润的奇妙世界：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

基本上归结为： 如果您有两个相邻的垂直边距，则只使用其中一个，而忽略另一个。浏览器假定您打算使用1个保证金而不是通常预期的保证金：2个保证金相互增加。

实现您想要的最简单（但不是那么优雅）的方法是让wrap div padding-top 1px .wrap { width: 100px; height: 100px; background: #565656; padding-top: 1px; /* add this */ } ，以便边距不再相邻。

{{1}}

Answer 2

Bazzz解释了原因，实现了你想要的东西（据我所知）

http://www.codepen.io/anon/pen/jHqry

.wrap {
    width: 100px;
    height: 100px;
    background: #565656;
  position:relative;
}

.sub {
    background: red;
    top: 100px;
  position:relative;
}