关于div布局，子div标签相对于父标签做margin设置时，没有起作用
css如下：body{background-color:#CC6600;margin:0;padding:0;}#wrapper{background-color:#CC...
css如下：
body {
background-color: #CC6600;
margin: 0;
padding: 0;
}
#wrapper {
background-color: #CC3333;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #header {
background-color:#CC9999;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #middle {
background-color:#006666;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #footer {
background-color:#00FF00;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper .item1 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#00CC99;
}
#wrapper .item2 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#000000;
}
#wrapper .item3 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#CC99FF;
}
html如下 ：
<body>
<div id="wrapper">
<div id="header">
<div style="height:1px"></div>
<!--如果不加这一行，整个wrapper跟顶部会有很大的缝隙，即使设置body的padding和margin为0，wrapper的margin和padding为0，还有header的margin和padding为0，为什么，wrapper不应该紧紧贴着body的顶部吗？求指导。-->
<div class="item1">item1的margin-top为10px,但是如果不加上面一行，效果是item1相对于body标签做margin-top=10px的调整，而不是item1相对父标签header做margin-top=10px的布局，晕了。
</div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</body> 展开
body {
background-color: #CC6600;
margin: 0;
padding: 0;
}
#wrapper {
background-color: #CC3333;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #header {
background-color:#CC9999;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #middle {
background-color:#006666;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper #footer {
background-color:#00FF00;
height: 200px;
width: 90%;
margin: 0 5% 0 5%;
}
#wrapper .item1 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#00CC99;
}
#wrapper .item2 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#000000;
}
#wrapper .item3 {
width: 90%;
height: 30px;
margin: 10px 5% 10px 5%;
background-color:#CC99FF;
}
html如下 ：
<body>
<div id="wrapper">
<div id="header">
<div style="height:1px"></div>
<!--如果不加这一行，整个wrapper跟顶部会有很大的缝隙，即使设置body的padding和margin为0，wrapper的margin和padding为0，还有header的margin和padding为0，为什么，wrapper不应该紧紧贴着body的顶部吗？求指导。-->
<div class="item1">item1的margin-top为10px,但是如果不加上面一行，效果是item1相对于body标签做margin-top=10px的调整，而不是item1相对父标签header做margin-top=10px的布局，晕了。
</div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</body> 展开
2个回答
展开全部
这个是css的一个知识点，叫外边距合并，你可以参考http://www.w3school.com.cn/css/css_margin_collapsing.asp。把你的#header设置一个border: 1px solid #FFFF00;就可以了。
追问
恩，太感谢了，分数就送给你了
追答
还有你的margin: 0 5% 0 5%;写成margin: 0 5%;就可以了，代码越简洁越好。可以看下我发给你的那个链接的上一个点：css外边距。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在body{}的上方加一个：*{margin:0; padding:0;}试试
更多追问追答
追问
我试了下，没用
追答
我把你代码粘过来，试了下，wrapper跟顶部没有间隙，item1的上边距是你自己设的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
