当两个相邻的普通元素设置margin时，则它们的间距并不是简单的外边距相加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin的重叠现象</title>
</head>
<style>
#div1{
height: 100px;
margin-bottom:50px;
background: blue;
}
#div2{
height: 100px;
margin-top: 50px;
background: green;
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
效果如下：
两个div的高度是100px，明显间距不是50px＋50px
原因是当两个相邻普通元素设置margin时，实际它们之间的外边距满足其中设置外边距较大的一方。当然同时肯定满足设置外边距较小的一方。
这种重叠现象不值发生在兄弟元素之间，父子元素也会发生重叠现象。
时间： 2024-08-09 03:12:44