Rumah >hujung hadapan web >html tutorial >div嵌套问题_html/css_WEB-ITnose

div嵌套问题_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 12:08:151106semak imbas

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



   
目录




其中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/

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn