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

为什么子 div 的边距相对于 body 移动换行，而不是其本身相对于换行移动？ (可能是有史以来最愚蠢的问题，但我不明白 >< ) 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 */
}