Heim >Web-Frontend >HTML-Tutorial >div嵌套问题_html/css_WEB-ITnose

div嵌套问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:08:151105Durchsuche

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



   
目录




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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn