子元素上的margin作用到了父元素上

最新推荐文章于 2023-03-28 15:02:44 发布

原创最新推荐文章于 2023-03-28 15:02:44 发布 · 930 阅读

CC 4.0 BY-SA版权

margin外边距合并详解:
外边距合并现象在网页布局中非常的常见，必须对此有明确的把握，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面结合实例代码对margin外边距合并做一下总结。
外边距合并概念:
相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
（1）.相邻的外边距之间没有非空内容、padding或者border。
（2）.元素都处于文档流中，即非浮动和position属性值不为absolute和fixed的元素。
特别说明:如果是元素是父子关系，子元素的padding和border并不能够消除合并现象。合并可以存在于兄弟对象之间，也可以存在于父子对象之间

<!DOCTYPE html>
<html>
<head>
	<title>hah</title>
	<meta charset="utf-8">
	<style type="text/css">
	        body{
		        margin:0;
		        padding:0;
                }
		div{
			width:50px;
			height:50px;
			background: red;
		}
		#div{
			margin-top:30px;
		}
		#div{
			width:40px;
			height:40px;
			background: green;
		}
	</style>
</head>
<body>
<div>
	<div id='div'></div>
</div>
</body>
</html>

以上代码的初衷是让子元素的顶部距离父元素30px，但是事实上却并没有实现预期的效果，而是子元素顶部紧贴父元素，并且margin-top好像转移给了父元素，让父元素产生上外边距。这其实是一个典型的外边距合并问题，但是并非所有的浏览器都会产生这种情况，一般标准浏览器都会出现此现象，而IE6和IE7在此状态下不会出现外边距合并现象。上外边距合并出现的条件:
1.父元素的上边距与子元素的上边距之间没有border。
2.父元素的上边距与子元素的上边距之间没有非空内容。
3.父元素的上边距与子元素的上边距之间没有padding。
3.父元素和子元素中没有设置定位属性（除static和relative）、overflow（除visible）和display:inline-block等。
4.父元素或者资源都没有浮动。
注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单，只要破坏上面的一种情况就可以了。