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

最新推荐文章于 2025-09-04 16:57:43 发布

原创最新推荐文章于 2025-09-04 16:57:43 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习问题专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在CSS布局中，子元素的margin-top属性如何影响其父元素的顶部间距，并提供了两种有效解决方案：一是通过设置父元素的overflow属性为hidden；二是调整子元素的margin属性为父元素的padding。

先来看看如下代码：

<!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>

生成的样式是这样的