求教css高手，下面这个怪异的问题

Even713 2010-01-22 11:39:50

code 1:



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<meta http-equiv="Content-Type" content="text/html;" charset="gb2312"></meta>

<head>

</head>

<style>

#top_outer{

	width:100%;

	height:20px;

	background:#EDF2F6;

}



#page_outer{

	width:100%;

	height:400px;

	background:#EDF2F6;

	border:1px solid red;

}



#mainContent{

	border:1px solid red;

	margin-top:50px;

	margin-left:50%;

	width:50%;

	height:200px;/**/

}

</style>

<body>

	<div id="top_outer">

	</div>



	<div id="page_outer">

		<div id="mainContent">

		</div>

	</div>

</body>

</html>

code2:



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<meta http-equiv="Content-Type" content="text/html;" charset="gb2312"></meta>

<head>

	<title>登录</title>

</head>

<style>

#top_outer{

	width:100%;

	height:20px;

	background:#EDF2F6;

}



#page_outer{

	width:100%;

	height:400px;

	background:#EDF2F6;

}



#mainContent{

	border:1px solid red;

	margin-top:50px;

	margin-left:50%;

	width:50%;

	height:200px;/**/

}

</style>

<body>

	<div id="top_outer">

	</div>



	<div id="page_outer">

		<div id="mainContent">

		</div>

	</div>

</body>

</html>

麻烦运行一下代码
这两段代码的差别在 #page_outer 上，仅仅多了一句 border 1px的修饰，但造成的效果却大相径庭。
maincontent的margin-top应该是相对于父容器的吧？为什么在code2中会使得top_outer 和 page_outer当中有间隙呢？

...全文

74 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ddcatlee 2010-01-22

打赏
举报

google 垂直边距压缩（或重叠）

hookee 2010-01-22

打赏
举报

firebug下可以看到，位置实际上是对的，只是没有字符的话，底色没有显示出来

hookee 2010-01-22

打赏
举报

FF下有间隙，加一个就可以了



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<meta http-equiv="Content-Type" content="text/html;" charset="gb2312"></meta>

<head>

    <title>登录</title>

</head>

<style>

#top_outer{

    width:100%;

    height:20px;

    background:#0F0;

}



#page_outer{

    width:100%;

    height:400px;

    background:#EDF2F6;

}



#mainContent{

    border:1px solid red;

    margin:50px 0 0 50%;

    height:200px;

}

</style>

<body>

    <div id="top_outer">

    </div>



    <div id="page_outer"> 

        <div id="mainContent">

        </div>

    </div>

</body>

</html>