Home > Article > Web Front-end > Weird div margins, terrible unsolvable problem, sincerely looking for answers_html/css_WEB-ITnose
Weird div margins, terrible unsolvable problem, sincerely looking for answers_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:291070browse
As shown in the picture above, the blue part is the background floating div, and the white part in the middle is the centered div. No margins are set.
My question is: Why are there margins above and below the white div part?
It’s so difficult to understand.
Reply to the discussion (solution)
Post the code and you won’t be able to tell anything by looking at it this way.
Cleared?
*{margin:0;paddding:0;}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>show2</title> <meta name="author" content="Administrator" /> <!-- Date: 2012-12-12 --> <style> body{ } .alignCenter{ margin: 10px auto; width: 950px; } </style> </head> <body> <style> ._head{width: 100%; float: left} a{display:inline-block;margin-left: 20px;text-align: center;font-family:"Arial" "黑体";color: white;} .nv_logo{width: 950px;height: 128px;} .logo{width: 246px;height: 128px;float: left} .nv{width: 704px;height: 30px;padding-top: 98px;background-image: url(src/nv.png);background-repeat: no-repeat;float: left;background-position: -10px 80px;text-align: center;} </style> <div class="_head"> <div class="alignCenter"> <div class="nv_logo"> <!--logo--> <div class="logo"> <img src="src/logo.png" /> </div> <!--导航--> <div class="nv"> <a style="height: 20px;width: 80px;">首页</a><a style="height: 20px;width: 80px;">关于火狼</a><a style="height: 20px;width: 80px;">服务项目</a><a style="height: 20px;width: 80px;">案例展示</a><a style="height: 20px;width: 80px;">客户服务</a><a style="height: 20px;width: 80px;">联系我们</a><a style="height: 20px;width: 80px;">VIP服务</a> </div> </div> </div> </div> <style> ._center{width: 100%;background-image: url(src/background.png);float: left} ._center dl{padding-top: 20px;margin-left: 20px;width: 910px;} ._center dt{} ._center dd{border-style: solid;border-color: #FFFFFF; border-left-width:0px;border-right-width:0px; margin-left: 0px;margin-top: 20px;} </style> <div class="_center"> <div class="alignCenter" style="background-image: url(src/centerground.png);"> <dl> <dt><img src="src/showcases.png" /></dt> <dd> <a></a> </dd> <dt style="text-align: right;"><a>上一页</a><a>下一页</a></dt> </dl> </div> </div> <style> ._bottom{width: 100%;background-image: url(src/bottom.png);height: 95px;background-repeat: repeat-x;padding-top: 0px;float: left} </style> <div class="_bottom"> <div class="alignCenter"> </div> </div> </body></html> Cleared?
CSS code?1*{margin:0;padding:0;} I have tried this, margin:0px;padding:0px; but it doesn’t work. I just encountered this problem today. The code is posted on the third floor, please help me take a look, thank you
As shown in the picture above, the blue part is the background floating div, and the white part in the middle is the centered div. No margins are set.
My question is: Why are there margins above and below the white div part?
It’s so difficult to understand. Please help, the code is posted on the third floor