为什么这个margin-top会影响父元素？

最新推荐文章于 2022-09-25 14:34:56 发布

xhb2004qq

最新推荐文章于 2022-09-25 14:34:56 发布

阅读量183

点赞数 1

本文链接：https://blog.csdn.net/xhb2004qq/article/details/90741133

版权

![本来想子元素离父元素高度margin-top也离50px；结果重叠了。好像父元素下落了50px；直接贴上了子元素

<html>
   <head>
     <meta http-equiv = "Content-Type"  content = "text/html; charset = uft-8">
	 <title>2D动画1</title>
       <style>
			.father{
				margin:0 auto;
				width:960px;
				height:720px;
				background:gray;
				
			}
			.son{
				width:100px;
				height:100px;
				background:red;			
				margin:50px 50px;				
			}			
	   </style>
   </head>
   
   
   <body>
      <div  class = "father">
	    <div class = "son">
			2D旋转
		</div>
	  </div>   
   </body>
</html>

本来想子元素离父元素高度margin-top也离50px；结果重叠了。好像父元素下落了50px；直接贴上了子元素
产生负作用：导致父元素的背景颜色不显示。
解决方案一：在父元素添加border属性.father{border:1px solid white;}。
解决方案二：采用消除塌陷
在父元素添加属性 .father{overflow:auto;}

另外附上https://ask.csdn.net/questions/691320同类问题
及其@支付宝加好友偷能量挖的回答原因介绍
border可以防止margin叠加，没有border上下存在margin（包括子元素）会叠加margin去最大值
精通CSS里面有提到margin叠加
https://img-ask.csdn.net/upload/201806/06/1528279454_125107.png
https://img-ask.csdn.net/upload/201806/06/1528279454_125107.png
https://img-ask.csdn.net/upload/201806/06/1528279460_413003.png

xhb2004qq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么这个margin-top会影响父元素？

![本来想子元素离父元素高度margin-top也离50px；结果重叠了。好像父元素下落了50px；直接贴上了子元素<html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset = uft-8"> <title>2D动画1</t...
复制链接

扫一扫