Rumah > Artikel > hujung hadapan web > 用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css_WEB-ITnose
用margin:0 auto;居中的div为什么上下都有间距？设置margin:0px;都不行_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:17:321207semak imbas
<!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" / 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="src/showcases.png" / 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但就是有边距。不管怎么说非常感谢哈
初始化是你写每个页面都需要的
你用插件看到的只是你写的那些
本身各个元素之间都是有间距的
所以才要初始化嘛
加油
（初始化就是让所有都归零）