CSS外边框的折叠

最新推荐文章于 2024-01-26 11:54:41 发布

L菌体

最新推荐文章于 2024-01-26 11:54:41 发布

阅读量386

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_46507557/article/details/113006206

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

未设置外边距(margin)的样子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
				垂直外边距的重叠（折叠）
					相邻的垂直方向外边距会发生重叠现象
					兄弟元素
						兄弟元素间的相邻垂直外边距会取两者之间绝对值的较大值
						
					父子元素
						父子元素间相邻外边距，子元素的会传递给父元素（上外边距）		 
					
		 	*/
		 	#box1{
		 		background-color: #008000;
		 		width:300px;
		 		height:300px;
		 		/*设置下外边距--->父子元素都有设置外边距，但它们粘合在一起，并没达到子元素在左下角的效果*/
		 		margin-bottom: 100px;
		 	}
		 	#box2{
		 		background-color: #FA8072;
		 		width:100px;
		 		height:100px;
		 		/*设置上外边距--->想达到子元素在左下角的效果*/
		 		margin-top: 100px;
		 	}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2"></div>
		</div>
	</body>
</html>