css - Div 在设计 View 和实时 View 之间的间距不正确

Question

我正在尝试为 div 提供少量的顶部边距。它工作正常并且在设计 View 中执行我想要的操作，但在实时 View 或浏览器中它什么也没显示，就好像那行代码不存在一样。我是 Stackflow 的新手，所以我尝试发布我正在使用的代码。

<div class="overallWrap">
<div class="backgroundWrap">
    <div class="topWrap">
        <div class="dvd"></div>
    </div>      
    <div class="titleWrap">
        <div class="title"></div>
        <div class="socialWrap">
                <div class="facebook"></div>
                <div class="twitter"></div>
                <div class="link"></div>         
        </div>
    </div>
    <div class="midWrap">
        <div class="tools"></div>
        <div class="menuWrap">
            <div class="ps"></div>
            <div class="fl"></div>
            <div class="dw"></div>
            <div class="blender"></div>
        </div>        
    </div>
    <div class="bottomWrap">
        <div class="logo"></div>
        <div class="quote"></div>
    </div>
</div>

CSS 是:

* {
color:black;
}
body {
    background-color:#000;
.overallWrap {
    background-color:white;
    width:920px;/*DO NOT CHANGE*/
    height:1100px;/*DO NOT CHANGE*/
    margin-left:215px;
    margin-top:40px;
    }
.backgroundWrap {
    width:900px;/*DO NOT CHANGE*/
    height:1060px;/*DO NOT CHANGE*/
    background-image:url(dgltest.jpg);
    background-repeat:no-repeat;
    margin-top:12px;
    margin-left:15px;
}
.dvd {
    width:300px;/*DO NOT CHANGE*/
    height:60px;/*DO NOT CHANGE*/
    float:right;
    margin-right:15px;
}
.topWrap {
    width:900px;/*DO NOT CHANGE*/
    height:65px;/*DO NOT CHANGE*/
}
.titleWrap {
    width:900px;/*DO NOT CHANGE*/
    height:265px;/*DO NOT CHANGE*/
}
.title {
    width:780px;/*DO NOT CHANGE*/
    height:265px;/*DO NOT CHANGE*/
    float:left;
}
.socialWrap {
    width:115px;
    height:100px;
    float:right;
    margin-top:150px;
}
.leftWrap {
    width:75px;/*DO NOT CHANGE*/
    height:100px;/*DO NOT CHANGE*/
}
.facebook {
    width:30px;/*DO NOT CHANGE*/
    height:30px;/*DO NOT CHANGE*/
    margin-top:70px;
    margin-left:10px;
    float:left;
}
.twitter {
    width:30px;/*DO NOT CHANGE*/
    height:30px;/*DO NOT CHANGE*/
    float:right;
    margin-top:70px;
    margin-right:15px;
}
.link {
    width:30px;/*DO NOT CHANGE*/
    height:30px;/*DO NOT CHANGE*/
    margin-top:70px;
    margin-left:40px;
}
.midWrap {
    width:900px;/*DO NOT CHANGE*/
    height:410px;/*DO NOT CHANGE*/
}
.tools {
    width:30px;/*DO NOT CHANGE*/
    height:410px;/*DO NOT CHANGE*/
    float:left;
    margin-left:37px;
}
.menuWrap {
    width:270px;/*DO NOT CHANGE*/
    height:410px;/*DO NOT CHANGE*/
    float:right;
}
.ps {
    width:270px;/*DO NOT CHANGE*/
    height:80px;/*DO NOT CHANGE*/
    margin-top:10px;
}
.fl {
    width:270px;/*DO NOT CHANGE*/
    height:80px;/*DO NOT CHANGE*/
    margin-top:30px;
}
.dw {
    width:270px;/*DO NOT CHANGE*/
    height:80px;/*DO NOT CHANGE*/
    margin-top:30px;
}
.blender {
    width:270px;/*DO NOT CHANGE*/
    height:80px;/*DO NOT CHANGE*/
    margin-top:20px;
}
.bottomWrap {
    width:900px;/*DO NOT CHANGE*/
    height:320px;/*DO NOT CHANGE*/
}
.logo {
    width:200px;/*DO NOT CHANGE*/
    height:240px;/*DO NOT CHANGE*/
    margin-top:80px;
    float:left;
}
.quote {
    width:650px;/*DO NOT CHANGE*/
    height:280px;/*DO NOT CHANGE*/
    float:right;
}

overallWrap 是一个 div，它是我要显示的总屏幕大小。里面是白色的，外面是黑色的，所以它看起来像一个黑色屏幕中间的白色大矩形。然后我制作了一个较小的 backgroundWrap div 以适应 overallWrap 的内部，边距边框位于顶部 12px 和左侧 10px。我的问题是，当我在浏览器中查看它或实时查看 backgroundWrap 中的代码时，margin top 什么都不做，所以我看不到 12px 的白色 strip ，如果这有意义的话。啊，这是我的动力。任何帮助都会非常感谢。

Answer 1

显然，您的设计 View 中的盒模型没有折叠边距。边距的正确行为是让它们塌陷。尝试改用填充。

.backgroundWrap { padding-top: 12px; }

简而言之，当您在包装器周围设置 margin-top: 40px 并在内部 div 中设置 margin-top: 12px 时，内部边距将与包装器一起折叠所以你不会看到两者之间的分离。