Home >Web Front-end >HTML Tutorial >div nesting problem_html/css_WEB-ITnose
div nesting problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:151106browse
I made a nested format as follows:
6c04bd5ca3fcae76e30b72ad730ca86d
243a8f3f087936dc3f96e2f0cf018c22
6fe94dc97080d2a50cb38590b83c99e9Directoryd4e6ef3935d870d31c81823c096b9b03
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
where the css is:
#main { margin:0px;height:1000px;width:170px;background-image: url(../images/menu_bg.jpg);}
#menu { margin:0px;}
The problem is: before the menu block is not nested, the outermost main block The top and left sides of the background are close to the edge of the browser, without any gaps. However, after I added the nested menu block, the left border of the outer main block was fine, but the top border moved downwards. I can't paste it to the top of the browser. I tried adding margin-top:0px to the css, but it still didn't work. I don't know what is the reason for this phenomenon?
Ask experts online for answers, thank you!
Reply to discussion (solution)
<!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> I made a typo earlier, the margin set in my #menu is 10px, this setting should be the size of the outer gap of the menu block. Logically speaking, the outer main block should not move, and the menu block should move down 10px. Why does the outer block also move down 10px after setting it? But there is no problem with the space on the left
I found that setting padding is enough, but I am still confused as to why setting the margin attribute of the inner div block will cause the outer block to move accordingly.
http://leepiao.blog.163.com/blog/static/485031302010427113653/
This post is indeed correct, thank you very much