用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css

首页

web前端

html教程

用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:17 PM

<!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="/static/imghwm/default1.png"  data-src="src/logo.png"  class="lazy"   / alt="用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css_WEB-ITnose" >					</div>					<!--导航-->					<div class="nv">						<a   style="max-width:90%">首页</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="/static/imghwm/default1.png"  data-src="src/showcases.png"  class="lazy"   / alt="用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css_WEB-ITnose" ></dt>					<dd>						<a></a>					</dd>					<dt   style="max-width:90%"><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>

回复讨论(解决方案)

是不是这个问题？

初始化css
*{padding:0;margin:0;}
这种方法不是很提倡
延缓加载速度
一般我都这样
/*清除内外边距*/
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;}
/*设置字体*/
body,textarea,button,input,select{font:12px/1.5 Verdana, Geneva, sans-serif,'宋体','微软雅黑';color:#333;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
em{font-style:normal;}
/*设置列表*/
ul,ol{list-style:none;}
/*设置表格*/
th,td{border-collapse:collapse;border-spacing:0;}
/*设置图片*/
img{border:none;}
/*设置链接*/
a{color:#999;text-decoration:none;outline:none;}
a:hover{text-decoration:underline;color:#06C;}
:focus{outline:none;}

这是讲你的.alignCenter{
margin: 10px auto;
width: 950px;}的10px去掉之后的效果

说到底
你就是没有初始化css
写页面最基本的就是初始化css
初始化要怎么写
我已经给你了
不是很全
但已经不少了

说到底
你就是没有初始化css
写页面最基本的就是初始化css
初始化要怎么写
我已经给你了
不是很全
但已经不少了哇塞，新人不懂啊。才知道，终于学到了一招，可是我还是不知道问题出在哪里。是哪里的定义覆盖了我的定义。我在头部加了一个*{margin:0;padding:0}就解决了。但是我调试用的都是火狐的插件，计算出来的CSS样式里尽管margin和padding 都是0但就是有边距。不管怎么说非常感谢哈

初始化是你写每个页面都需要的
你用插件看到的只是你写的那些
本身各个元素之间都是有间距的
所以才要初始化嘛
加油
（初始化就是让所有都归零）

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。