css嵌套关系外边距注意事项

在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;height: 0px;}
			#wai{width: 200px;height: 200px;background: pink ;/*padding-top:50px ;*/float: left;}
			#wai .nei{width: 50px;height: 50px;background: green;/*margin-left: 100px;*/float: left;}
			p{ width :200px;height:260px;/*margin-top: 96px;*/background: skyblue;float: left;}
		</style>
	</head>
	<body>
		<div id="wai">
			<div class="nei"></div>
		</div>	
			<p>在设置内外边距的时候要注意:
				1、父子嵌套关系的情况下,只有设置子元素margin-top的时候会影响父元素一同向下,其余的属性不会影响父级。(可以给父级元素设置padding-top这样就可以实现子元素的向下移动)
				2、在给父级设置padding-top的px值后要在父元素的高度height减去相应的数值。
			</p>
			
		</div>
	</body>
</html>
		
		
		

发布了40 篇原创文章 · 获赞 1 · 访问量 1177

猜你喜欢

转载自blog.csdn.net/weixin_46421045/article/details/104652134