先来看看如下代码:
<!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属性;