Home >Web Front-end >HTML Tutorial >Why does the div centered with margin:0 auto; have spacing up and down? Even setting margin:0px; will not work_html/css_WEB-ITnose
Why does the div centered with margin:0 auto; have spacing up and down? Even setting margin:0px; will not work_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:321246browse
<!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> Reply to discussion (solution)
.alignCenter{
margin : 10px auto;
width: 950px;
}
531ac245ce3e4fe3d50054a55f265927
Is this the problem?
Initialize css
*{padding:0;margin:0;}
Delay the loading speed
Generally I do this
/*Clear Internal and external margins*/
html,body,div,p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,li,table,th,td,span,img,dl,dd, dt,input,textarea,button{border:medium none;padding:0;margin:0;}
/*Set font*/
body,textarea,button,input,select{font:12px/1.5 Verdana , Geneva, sans-serif,'宋体','Microsoft Yahei';color:#333;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
em {font-style:normal;}
/*Set list*/
ul,ol{list-style:none;}
/*Set table*/
th,td{border-collapse :collapse;border-spacing:0;}
/*Set image*/
img{border:none;}
/*Set link*/
a{color:#999;text- decoration:none;outline:none;}
a:hover{text-decoration:underline;color:#06C;}
:focus{outline:none;}
This is about the effect after removing 10px of .alignCenter{
width: 950px;}
59d96a569f974d2483a8e56439a598de
you just haven’t initialized the css
The most basic thing to write a page is to initialize the css How to write initialization
I’ve already given it to you
It’s not complete
But it’s already a lot
In the final analysis
you just haven’t initialized the css
How to write the initialization
I have already given it to you
It’s not quite complete
but it’s quite a lot. Wow, newcomers don’t understand. Then I realized that I finally learned a trick, but I still don’t know where the problem lies. Where's definition overrides my definition. I added a *{margin:0;padding:0} to the header and solved it. But I used Firefox plug-ins for debugging, and the calculated CSS style has margins even though margin and padding are both 0. Anyway, thank you very much
Initialization is needed for every page you write
What you see with the plug-in is only what you wrote
That’s why we need to initialize
Come on
(Initialization is to reset everything to zero)