Home > Article > Web Front-end > div嵌套问题_html/css_WEB-ITnose
div嵌套问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:151027browse
我弄了一个如下的嵌套格式：
目录
其中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/
这个帖子果然正解，万分感谢
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：为什么连续2个div的margin 20 不会出现40？_html/css_WEB-ITnoseNext article：请教个使用调用WebBrowser打印的问题_html/css_WEB-ITnose