html - 子 div 边距顶部

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 移动 wrap 而不是自身相对于 wrap？（可能是有史以来最愚蠢的问题，但我没有得到><） http://jsfiddle.net/QJug3/

                                                                                               

Answer 1

欢迎来到崩塌边缘的奇妙世界：

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

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

实现您想要的最简单（但不是那么优雅）的方法是给您的wrapdiv a padding-topof1px以便边距不再相邻。

.wrap {
 width: 100px;
 height: 100px;
 background: #565656;
 padding-top: 1px; /* add this */
}

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;
}