首页 >web前端 >html教程 >div嵌套问题_html/css_WEB-ITnose

div嵌套问题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:08:151103浏览

我弄了一个如下的嵌套格式:



   
目录




其中css为:
#main { margin:0px;height:1000px;width:170px;background-image:url(../images/menu_bg.jpg);}
#menu { margin:0px;}

问题是:在不嵌套menu那个块之前,最外层的那个main块的背景的上边和左边都是贴着浏览器的边缘的,没有一点空隙,可是当我加入那个嵌套的menu块后,外层的那个main块的左边界没问题,可是上边界却往下移动了,没办法贴到浏览器的顶边,我试着给那个css加入 margin-top:0px,可是还是没有效果,不知道造成这种现象的原因是什么?
在线求高手解答,谢谢!


回复讨论(解决方案)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>body {	margin:0;	padding:0}#main {	margin:0px;	height:1000px;	width:170px;	background:red;}#menu {	margin:0px;	background:blue;}</style><body><div id="main">  <div id="menu">目录</div></div></body></html>

前面打错了,我的#menu里面设置的margin是10px,这个设置的应该是menu那个块的外部空隙大小吧,按道理说,应该外面的main那个块不动,menu块往下移动10px,为什么设置了以后外面那个块也会往下移10px,可是左边的空间却没有问题

发现设置padding就可以了,可是还是很困惑,为什么设定内部div块的margin属性会使得外部的块也跟着移动呢。

http://leepiao.blog.163.com/blog/static/485031302010427113653/

这个帖子果然正解,万分感谢

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn