读书人

一个很简单却很奇怪的div+css有关问题

发布时间: 2012-02-06 15:52:45 作者: rapoo

一个很简单却很奇怪的div+css问题


页面1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<link href= "css.css " rel= "stylesheet " type= "text/css " />
</head>

<body>
<div id= "container "> <!--页面层容器-->
   <div id= "Header "> <!--页面头部-->   页面头部 </div>
   <div id= "PageBody "> <!--页面主体-->
     <div id= "Sidebar "> <!--侧边栏--> 这是左侧     </div>
     <div id= "MainBody "> <!--主体内容--> 这是右边主体内容   </div>
   </div>
   <div id= "Footer "> <!--页面底部--> 页面底部   </div>
</div>
</body>
</html>

页面2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<link href= "css.css " rel= "stylesheet " type= "text/css " />
</head>

<body>
<div id= "container ">
<div id= "Header ">
这是头文件 </div>
<div id= "PageBody ">
<div id= "Sidebar "> </div>
<div id= "MainBody "> </div>
</div>
<div id= "Footer "> </div>
</div>
</body>
</html>

css.css

/* CSS Document */

/*基本信息*/
body {font:12px Tahoma;margin:0px auto;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:800px; margin:0px auto;}

/*页面头部*/
#Header {width:800px;height:100px;background:#FFCC99;}

/*页面主体*/
#PageBody {width:800px;height:400px;background:#CCFF00}
/*主体左侧*/
#Sidebar {float:left; width:200px; height:400px; background-color:#996633; }
/*主体右侧*/
#MainBody{float:left; width:600px; height:400px; background-color:#CC6600;}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}


问题是:页面一和顶部怎么都有10px的距离 页面二却能紧挨顶部。

[解决办法]
页面1有中文空格,去掉即可
<body>
<div id= "container "> <!--页面层容器-->
<div id= "Header "> <!--页面头部-->   页面头部 </div>
<div id= "PageBody "> <!--页面主体-->
     <div id= "Sidebar "> <!--侧边栏--> 这是左侧     </div>
     <div id= "MainBody "> <!--主体内容--> 这是右边主体内容   </div>
   </div>
   <div id= "Footer "> <!--页面底部--> 页面底部   </div>


</div>
</body>
</html>

读书人网 >CSS

热点推荐