Why does the div centered with margin:0 auto; have spacing up and down? Even setting margin:0px; will not work_html/css

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

WBOY

Release： 2016-06-24 12:17:32

Original

1245 people have browsed it

<!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>

Copy after login

Reply to discussion (solution)

.alignCenter{
margin : 10px auto;
width: 950px;

}

Is this the problem?

Initialize css
*{padding:0;margin:0;}

This method is not very recommended

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{

margin: 10px auto;

width: 950px;}

Ultimately

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

The most basic thing to write a page is to initialize 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

There is space between each element

That’s why we need to initialize
Come on
(Initialization is to reset everything to zero)