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>Copy after login
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
