1子级div margin属性影响父级div margin属性

先来看看如下代码:

<!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=utf-8" />
<title>为什么子footer_top的margin-top属性错误呢?</title>
<style type="text/css">
#footer{width:1314px;height:432px;background-color:#666666;}
#footer_top{width:1200px;height:328px;margin-top:24px;margin-left:32px;background-color:#06C;}
#footer_btm{height:90px;background-color:#3399fe;}
</style>
</head>


<body>
为什么子footer_top的margin-top属性引起父级footer margin-top属性变化呢?
	<div id="footer">
    	<div id="footer_top">t</div>
        <div id="footer_btm">b</div>
    </div>
</body>
</html>

生成的样式是这样的



字下面的div怎么会有空隙的呢?这是怎么回事呢??????



解决方案:1.在父级div里设置overflow:hidden既可以;

    2. 子级不设置margin属性,在父级div里设置padding属性;

相关文章