css之margin塌陷和margin合并问题

最新推荐文章于 2022-04-05 22:07:32 发布

gxgalaxy

最新推荐文章于 2022-04-05 22:07:32 发布

阅读量281

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/gxgalaxy/article/details/81564656

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

margin塌陷：垂直方向上的margin父子元素会结合在一起，会取其中最大值。

实例：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meter charset="utf-8">
	<title>margin</title> 
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
		<div class="wrapper">
		<div class="content"></div>
	</div>
</body>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
.wrapper{
	margin-left: 100px;
	margin-top: 100px;
	width: 100px;
	height: 100px;
	background-color: black;
	/*border-top: 1px solid red;*/
	/*overflow:hidden;*/
	/*position:absolute;*/
	/*display:inline-block;*/
	/*float:left/right;*/

}
.content{
	margin-left: 50px;
	/*margin-top: 50px;*/
	width: 50px;
	height: 50px;
	background-color: green;
}

未给子元素设置垂直方向上的margin时效果（为了便于观察给body加上背景颜色）