一个很简单却很奇怪的div+css有关问题
日期：2014-05-17 浏览次数：20556 次
一个很简单却很奇怪的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>
页面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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
