margin重叠问题

最新推荐文章于 2022-05-25 15:50:53 发布

Mm_Dxx

最新推荐文章于 2022-05-25 15:50:53 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/mm_dxx/article/details/103805241

版权

假设父div里面有一个子div，给子div添加margin: 100px

	<meta charset="UTF-8">
	<title>margin</title>
	<style>
		.father {
			width: 300px;
			height: 300px;
			background-color: blue;
		.son {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
		</div>
	</div>
</body>
</html>

得到的结果：
在这里插入图片描述
margin重叠问题是指：

同级元素之间

两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的左外边距之和。
两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似于竖直方向上两个盒子margin值的叠加

父子元素之间（父级和第一个或者最后一个子元素）