<!DOCTYPE HTML>
<html>
<head>
<title>margin transfer </title>
<meta charset="utf-8">
<style type="text/css">
body{margin: 0;padding: 0;}
.outer{width: 100px;height: 100px;background: #ccc;}
.inner{width: 50px;height: 50px;background: #f00;margin-top: 30px;}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
上面的代码表示一个灰色背景的outer嵌套了一个红色背景的inner，按照正常的思维，inner的顶部和outer的顶部有30px的距离,
但实际上并未如此，inner的顶部和outer的顶部重合，而outer的顶部和body顶部产生了30px的距离。(如果inner的css属性中含有margin-bottom也会出现类似的情况)
原因：
CSS2.1的盒模型中规定，所有毗邻的两个或更多盒元素的margin-top和margin-bottom将会合并为一个margin共享之。(毗邻的意思就是同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔)
解决方法：
最简单的方法：给父元素outer 添加 overflow:hidden 属性；
其它方法：给父元素outer 添加 position: absolute/fixed 或 display: inline-block 或 float: left/right
时间： 2024-10-11 17:18:27