本文解释了HTML盒模型中margin塌陷的原因，源于早期W3C的设计，介绍了三种常见的解决方法：设置父元素border、padding或overflow。这些方法通过明确父元素边界避免了高度塌陷问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box_father{
background-color: greenyellow;
}
.box1{
width: 100px;
height: 100px;
background-color: deepskyblue;
margin-top: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box_father">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>以上演示了一个基础盒模型，效果如图1，常被用于说明margin塌陷问题。
代码中类名为box1的块元素所使用margin-top属性，并没有直接将父元素撑开（见图1中，box_father块元素的背景色，发现其确实没有被撑开），而是将此属性赋予给了父元素（这也是一种表象，形似有这种效果，实际上在浏览器中的开发者工具中可以看到父元素并没有这个margin属性，浏览器清晰地知道margin属性是属于box1的，详见图2）。
图1
图2
为什么会出现margin塌陷现象呢？部分初学者会觉得这个是设计时遇到的bug。本人初学时朴素地认为这是因为margin只是盒模型用于调整位置而生的一种保持“距离感”的属性，因此margin属性有别于border，padding和content，并不是真正的“内容”，因此他在边缘时比较特殊，撑不开父元素。扯远了，老师说这是一个历史遗留问题，W3C在早年设计之初，认为父元素内部的第一个或者最后一个元素的margin赋给父元素会有助于页面的效果呈现（实在是想不出为什么要这么设计，依我浅见，应该还是直接设置父元素的margin会更好吧）。
如何解决margin塌陷呢？常见有3种方法：
1.设置父元素border属性
2.设置父元素padding属性
3.设置父元素overflow：hidden
方法1：
<style>
.box_father{
background-color: greenyellow;
border: 1px solid rosybrown;
}
</style>
方法2：
<style>
.box_father{
background-color: greenyellow;
padding: 1px;
}
</style>
方法3：
<style>
.box_father{
background-color: greenyellow;
overflow: hidden;
}
</style>
以上三种方法均可以解决margin塌陷的问题
个人的理解是，不论是设置border还是padding，都是一种必须再度明确父元素边界的方法，在涉及到明确父元素边界的情况时，可以迫使浏览器去搞清楚父元素被子元素撑开的真实内容，因此可以避免height塌陷的问题。
总结：父元素的第一个或最后一个元素的margin-top属性和margin-bottom属性会导致出现margin塌陷问题，会致使父元素的height比预期中小。设置父元素的border、padding或overflow属性都可以解决此问题，使父元素的宽度得到正确的显示。
扫一扫
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
