Div在设计视图和实时视图之间没有正确的距离

我试图给div一些小量的margin-top。它工作正常，做我想要的设计视图，但在实时视图或在浏览器中，它不显示任何东西，就像这行代码不存在。即时通讯新的堆栈流如此生病尝试和张贴代码即时通讯使用。Div在设计视图和实时视图之间没有正确的距离

<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是总srceen大小我想显示。内部将是白色和外部黑色，所以它会看起来像一个黑色屏幕中间的大白色矩形。然后，我做了一个更小的backgroundWrap div，以适应整个边缘在12px和左边10px边缘的边界。我的问题是，当我在浏览器中查看它或实时查看backgroundWrap中的代码时，页首没有做任何事情，所以如果有意义的话我不能看到一个12px的白色条。 aarrgh驾驶着我。任何帮助将非常感谢。

来源

2014-01-10 user2150639

什么框架是设计视图和实时视图？ –

很明显，您的设计视图中的箱型不是折叠边距。边缘的正确行为是他们崩溃的原因。尝试使用填充代替。

.backgroundWrap { padding-top: 12px; }

总之，当你在内部的div内利润率将与包装器崩溃，所以你不会看到之间的分离周围设置纸上出现margin-top: 40px和margin-top: 12px。

来源

2014-01-10 18:55:02 beautifulcoder

Div在设计视图和实时视图之间没有正确的距离

回答

相关问题